From 3fdd22e900a528a26206e8d34efa0f3cd2ac3fb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 4 Oct 2024 00:29:50 +0200
Subject: [PATCH] pl-fe: Fix floating elements position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/account-hover-card.tsx         | 3 ++-
 .../pl-fe/src/components/dropdown-menu/dropdown-menu.tsx     | 3 ++-
 packages/pl-fe/src/components/status-hover-card.tsx          | 3 ++-
 packages/pl-fe/src/components/ui/popover/popover.tsx         | 5 ++++-
 packages/pl-fe/src/components/ui/tooltip/tooltip.tsx         | 2 ++
 .../emoji/containers/emoji-picker-dropdown-container.tsx     | 3 ++-
 .../ui/components/modals/edit-bookmark-folder-modal.tsx      | 3 ++-
 7 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx
index 135326bce..d7380682c 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 { shift, useFloating, useTransitionStyles } from '@floating-ui/react';
+import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
@@ -74,6 +74,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
         padding: 8,
       }),
     ],
+    whileElementsMounted: autoUpdate,
   });
 
   const { styles } = useTransitionStyles(context, {
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index 4247287f3..0bf48a5f1 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,4 +1,4 @@
-import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui/react';
+import { offset, Placement, useFloating, flip, arrow, shift, autoUpdate } from '@floating-ui/react';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -207,6 +207,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
         element: arrowRef,
       }),
     ],
+    whileElementsMounted: autoUpdate,
   });
 
   const handleClick: React.EventHandler<
diff --git a/packages/pl-fe/src/components/status-hover-card.tsx b/packages/pl-fe/src/components/status-hover-card.tsx
index 640520ffd..261e49bbc 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 { shift, useFloating, useTransitionStyles } from '@floating-ui/react';
+import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
@@ -54,6 +54,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
         padding: 8,
       }),
     ],
+    whileElementsMounted: autoUpdate,
   });
 
   const { styles } = useTransitionStyles(context, {
diff --git a/packages/pl-fe/src/components/ui/popover/popover.tsx b/packages/pl-fe/src/components/ui/popover/popover.tsx
index f004f8a84..2a614507d 100644
--- a/packages/pl-fe/src/components/ui/popover/popover.tsx
+++ b/packages/pl-fe/src/components/ui/popover/popover.tsx
@@ -1,6 +1,7 @@
 import {
   arrow,
   autoPlacement,
+  autoUpdate,
   FloatingArrow,
   offset,
   shift,
@@ -57,6 +58,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
         element: arrowRef,
       }),
     ],
+    whileElementsMounted: autoUpdate,
   });
 
   const { isMounted, styles } = useTransitionStyles(context, {
@@ -94,6 +96,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
         <Portal>
           <div
             ref={refs.setFloating}
+            className='z-40'
             style={{
               position: strategy,
               top: y ?? 0,
@@ -104,7 +107,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
             <div
               className={
                 clsx(
-                  'z-40 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
+                  'overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
                   { 'p-6': !isFlush },
                 )
               }
diff --git a/packages/pl-fe/src/components/ui/tooltip/tooltip.tsx b/packages/pl-fe/src/components/ui/tooltip/tooltip.tsx
index c12c6e21f..e5d24bb31 100644
--- a/packages/pl-fe/src/components/ui/tooltip/tooltip.tsx
+++ b/packages/pl-fe/src/components/ui/tooltip/tooltip.tsx
@@ -1,5 +1,6 @@
 import {
   arrow,
+  autoUpdate,
   FloatingArrow,
   FloatingPortal,
   offset,
@@ -39,6 +40,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
         element: arrowRef,
       }),
     ],
+    whileElementsMounted: autoUpdate,
   });
 
   const hover = useHover(context);
diff --git a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 31ecb26fb..093d26f71 100644
--- a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -1,4 +1,4 @@
-import { useFloating, shift, flip } from '@floating-ui/react';
+import { useFloating, shift, flip, autoUpdate } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { KeyboardEvent, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -24,6 +24,7 @@ const EmojiPickerDropdownContainer: React.FC<IEmojiPickerDropdownContainer> = ({
 
   const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
     middleware: [flip(), shift()],
+    whileElementsMounted: autoUpdate,
   });
 
   useClickOutside(refs, () => {
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 0905bbce4..3b5d33806 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 } from '@floating-ui/react';
+import { useFloating, shift, autoUpdate } from '@floating-ui/react';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -33,6 +33,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
 
   const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
     middleware: [shift()],
+    whileElementsMounted: autoUpdate,
   });
 
   useClickOutside(refs, () => {