diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx
index 1286f798a..3a2570d13 100644
--- a/packages/pl-fe/src/components/account-hover-card.tsx
+++ b/packages/pl-fe/src/components/account-hover-card.tsx
@@ -1,4 +1,4 @@
-import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
+import { autoUpdate, flip, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
@@ -76,6 +76,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
       reference: ref?.current,
     },
     middleware: [
+      flip(),
       shift({
         padding: 8,
       }),
diff --git a/packages/pl-fe/src/components/status-hover-card.tsx b/packages/pl-fe/src/components/status-hover-card.tsx
index 1f7ad2eb9..0f5b67ca4 100644
--- a/packages/pl-fe/src/components/status-hover-card.tsx
+++ b/packages/pl-fe/src/components/status-hover-card.tsx
@@ -1,4 +1,4 @@
-import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
+import { autoUpdate, flip, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
@@ -50,6 +50,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
     },
     placement: 'top',
     middleware: [
+      flip(),
       shift({
         padding: 8,
       }),
diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 9ac92d178..68f727a8d 100644
--- a/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -1,4 +1,4 @@
-import { useFloating, shift, autoUpdate } from '@floating-ui/react';
+import { useFloating, shift, autoUpdate, flip } from '@floating-ui/react';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -36,7 +36,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
   const [visible, setVisible] = useState(false);
 
   const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
-    middleware: [shift()],
+    middleware: [flip(), shift()],
     whileElementsMounted: autoUpdate,
   });