From d964590f544029ae126a5e0dd4fec9f44ee86845 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 28 May 2024 18:02:48 +0200
Subject: [PATCH] fix(post menu): use floating ui to dynamically position
 dropdowns based on available space

---
 src/components/post/post-menu/post-menu.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-menu/post-menu.tsx
index 39dd653d..944c9097 100644
--- a/src/components/post/post-menu/post-menu.tsx
+++ b/src/components/post/post-menu/post-menu.tsx
@@ -31,16 +31,23 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => {
 
 const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void }) => {
   const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false);
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'right-start',
+    middleware: [flip(), shift({ padding: 10 })],
+  });
+
   return (
     <div
       className={`${styles.postMenuItem} ${styles.dropdown}`}
       onMouseOver={() => setIsImageSearchMenuOpen(true)}
       onMouseLeave={() => setIsImageSearchMenuOpen(false)}
+      ref={refs.setReference}
       onClick={onClose}
     >
       Image search »
       {isImageSearchMenuOpen && (
-        <div className={styles.dropdownMenu}>
+        <div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
           <a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>
             <div className={styles.postMenuItem}>Google</div>
           </a>
@@ -59,16 +66,23 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
 const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => {
   const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
   const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'right-start',
+    middleware: [flip(), shift({ padding: 10 })],
+  });
+
   return (
     <div
       className={`${styles.postMenuItem} ${styles.dropdown}`}
       onMouseOver={() => setIsClientRedirectMenuOpen(true)}
       onMouseLeave={() => setIsClientRedirectMenuOpen(false)}
+      ref={refs.setReference}
       onClick={onClose}
     >
       View on »
       {isClientRedirectMenuOpen && (
-        <div className={styles.dropdownMenu}>
+        <div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
           <a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
             <div className={styles.postMenuItem}>Seedit</div>
           </a>