From 48ee9ad16e952c8fccf23cbfb8b1006556c46771 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 9 Aug 2023 13:34:44 +0530
Subject: [PATCH] chore: fix non-portal popover positioning

---
 .../Components/ContentListView/ListItemVaultInfo.tsx          | 2 +-
 .../javascripts/Components/FilePreview/FilePreviewModal.tsx   | 1 -
 .../NoteConflictResolutionModal.tsx                           | 2 --
 .../javascripts/Components/Vaults/AddToVaultMenuOption.tsx    | 4 ++--
 4 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
index 4c4828361..256d95e2a 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
@@ -28,7 +28,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
   const sharedByContact = application.sharedVaults.getItemSharedBy(item)
 
   return (
-    <div className="mt-2.5 flex flex-wrap items-center gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       <VaultNameBadge vault={vault} />
 
       {sharedByContact && (
diff --git a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
index e3e6b2dbf..6247ba32b 100644
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -223,7 +223,6 @@ const FilePreviewModal = observer(({ application }: Props) => {
               align="start"
               className="py-2"
               overrideZIndex="z-modal"
-              portal={false}
             >
               <Menu a11yLabel="File context menu" isOpen={showOptionsMenu}>
                 <FileMenuOptions
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
index 094b17b90..561f851fe 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
@@ -337,7 +337,6 @@ const NoteConflictResolutionModal = ({
                 className="!z-modal !max-w-[50ch]"
                 label={shouldSyncComparisonScroll ? 'Scrolling is synced' : 'Scrolling is not synced. Click to sync.'}
                 showOnMobile
-                portal={false}
               >
                 <div className="relative rounded-full p-1 hover:bg-contrast">
                   <Icon type={shouldSyncComparisonScroll ? 'link' : 'link-off'} className="text-neutral" />
@@ -382,7 +381,6 @@ const NoteConflictResolutionModal = ({
                 }
                 showOnMobile
                 showOnHover={false}
-                portal={false}
               >
                 <button className="rounded-full p-1 hover:bg-contrast">
                   <Icon type="info" className="text-neutral" />
diff --git a/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx b/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
index 30a57fe7e..e8e7899fc 100644
--- a/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
+++ b/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
@@ -9,7 +9,7 @@ import MenuItem from '../Menu/MenuItem'
 import Menu from '../Menu/Menu'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
 
-const VaultMenu = ({ items }: { items: DecryptedItemInterface[] }) => {
+const VaultMenu = observer(({ items }: { items: DecryptedItemInterface[] }) => {
   const application = useApplication()
   const vaults = application.vaults.getVaults()
 
@@ -104,7 +104,7 @@ const VaultMenu = ({ items }: { items: DecryptedItemInterface[] }) => {
       })}
     </Menu>
   )
-}
+})
 
 const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string; items: DecryptedItemInterface[] }) => {
   const buttonRef = useRef<HTMLButtonElement>(null)