From a092d134c64875ac091fed4bdc7619f3ff56e212 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 12 Dec 2023 21:52:35 +0530
Subject: [PATCH] chore: fix super block picker menu height in certain cases

---
 .../Popover/GetPositionedPopoverStyles.ts     |  6 ++-
 .../BlockPickerPlugin/BlockPickerPlugin.tsx   | 37 ++++++++----------
 .../ItemSelectionPlugin.tsx                   | 39 +++++++++----------
 3 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
index 3c3e1fe2ffb..027dedddfe9 100644
--- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
+++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
@@ -134,8 +134,12 @@ export const getPositionedPopoverStyles = ({
   const preferredSideRectCollisions = checkCollisions(rectForPreferredSide, documentRect)
 
   const oppositeSide = OppositeSide[side]
+  const rectForOppositeSide = getPositionedPopoverRect(popoverRect, anchorRect, oppositeSide, align)
+  const oppositeSideRectCollisions = checkCollisions(rectForOppositeSide, documentRect)
+
+  const sideWithLessOverflows =
+    preferredSideRectCollisions[side] < oppositeSideRectCollisions[oppositeSide] ? side : oppositeSide
 
-  const sideWithLessOverflows = preferredSideRectCollisions[side] ? oppositeSide : side
   const finalAlignment = getNonCollidingAlignment({
     finalSide: disableFlip ? side : sideWithLessOverflows,
     preferredAlignment: align,
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
index 5dd4d7fe67b..20807f9d2d4 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
@@ -9,7 +9,6 @@ import { BlockPickerMenuItem } from './BlockPickerMenuItem'
 import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password'
 import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table'
 import Popover from '@/Components/Popover/Popover'
-import { PopoverClassNames } from '../ClassNames'
 import { GetDatetimeBlockOptions } from '../Blocks/DateTime'
 import { isMobileScreen } from '@/Utils'
 import { useApplication } from '@/Components/ApplicationProvider'
@@ -132,25 +131,23 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
               side={isMobileScreen() ? 'top' : 'bottom'}
               maxHeight={(mh) => mh / 2}
             >
-              <div className={PopoverClassNames}>
-                <ul>
-                  {options.map((option, i: number) => (
-                    <BlockPickerMenuItem
-                      index={i}
-                      isSelected={selectedIndex === i}
-                      onClick={() => {
-                        setHighlightedIndex(i)
-                        selectOptionAndCleanUp(option)
-                      }}
-                      onMouseEnter={() => {
-                        setHighlightedIndex(i)
-                      }}
-                      key={option.key}
-                      option={option}
-                    />
-                  ))}
-                </ul>
-              </div>
+              <ul>
+                {options.map((option, i: number) => (
+                  <BlockPickerMenuItem
+                    index={i}
+                    isSelected={selectedIndex === i}
+                    onClick={() => {
+                      setHighlightedIndex(i)
+                      selectOptionAndCleanUp(option)
+                    }}
+                    onMouseEnter={() => {
+                      setHighlightedIndex(i)
+                    }}
+                    key={option.key}
+                    option={option}
+                  />
+                ))}
+              </ul>
             </Popover>
           )
         }}
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
index 6d223261ecb..6b8a9d0152f 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
@@ -10,7 +10,6 @@ import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
 import Popover from '@/Components/Popover/Popover'
 import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
 import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider'
-import { PopoverClassNames } from '../ClassNames'
 import { isMobileScreen } from '@/Utils'
 import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation'
 
@@ -104,26 +103,24 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
             side={isMobileScreen() ? 'top' : 'bottom'}
             maxHeight={(mh) => mh / 2}
           >
-            <div className={PopoverClassNames}>
-              <ul>
-                {options.map((option, i: number) => (
-                  <ItemSelectionItemComponent
-                    searchQuery={queryString || ''}
-                    index={i}
-                    isSelected={selectedIndex === i}
-                    onClick={() => {
-                      setHighlightedIndex(i)
-                      selectOptionAndCleanUp(option)
-                    }}
-                    onMouseEnter={() => {
-                      setHighlightedIndex(i)
-                    }}
-                    key={option.key}
-                    option={option}
-                  />
-                ))}
-              </ul>
-            </div>
+            <ul>
+              {options.map((option, i: number) => (
+                <ItemSelectionItemComponent
+                  searchQuery={queryString || ''}
+                  index={i}
+                  isSelected={selectedIndex === i}
+                  onClick={() => {
+                    setHighlightedIndex(i)
+                    selectOptionAndCleanUp(option)
+                  }}
+                  onMouseEnter={() => {
+                    setHighlightedIndex(i)
+                  }}
+                  key={option.key}
+                  option={option}
+                />
+              ))}
+            </ul>
           </Popover>
         )
       }}