From c1ee705402ed63910ef733464796ab5f848c5ac4 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 26 Oct 2023 03:06:12 +0530
Subject: [PATCH] fix: Fixed issue where some menus would get hidden behind the
 keyboard on iOS

---
 .../Components/LinkedItems/LinkedItemsButton.tsx      |  1 +
 .../Components/Popover/MobilePopoverContent.tsx       | 11 ++++++++---
 .../src/javascripts/Components/Popover/Popover.tsx    |  1 +
 .../web/src/javascripts/Components/Popover/Types.ts   |  1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
index 52465a641..1c5e0da82 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
@@ -35,6 +35,7 @@ const LinkedItemsButton = ({ linkingController, onClickPreprocessing }: Props) =
         anchorElement={buttonRef}
         open={isLinkingPanelOpen}
         className="pb-2"
+        forceFullHeightOnMobile
       >
         <LinkedItemsPanel item={activeItem} />
       </Popover>
diff --git a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
index d04e6567a..e0a401296 100644
--- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
@@ -24,6 +24,7 @@ const MobilePopoverContent = ({
   title,
   className,
   id,
+  forceFullHeightOnMobile,
 }: {
   open: boolean
   requestClose: () => void
@@ -31,6 +32,7 @@ const MobilePopoverContent = ({
   title: string
   id: string
   className?: string
+  forceFullHeightOnMobile?: boolean
 }) => {
   const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
   const [isMounted, setPopoverElement, element] = useModalAnimation(open, isMobileScreen)
@@ -164,11 +166,14 @@ const MobilePopoverContent = ({
   return (
     <Portal>
       <DisableScroll />
-      <div className="fixed inset-0 z-modal">
-        <div className="absolute inset-0 z-0 bg-passive-4 opacity-0" ref={setUnderlayElement} />
+      <div className="fixed left-0 top-0 z-modal h-full max-h-[var(--ios-viewport-height,_none)] w-full">
+        <div className="absolute z-0 h-full w-full bg-passive-4 opacity-0" ref={setUnderlayElement} />
         <div
           ref={mergeRefs([setPopoverElement, addCloseMethod])}
-          className="z-1 absolute bottom-0 flex max-h-[calc(100%_-_max(var(--safe-area-inset-top),2rem))] min-h-[40%] w-full flex-col rounded-t-xl bg-default pb-safe-bottom"
+          className={classNames(
+            'z-1 absolute bottom-0 flex max-h-[calc(100%_-_max(var(--safe-area-inset-top),2rem))] min-h-[40%] w-full flex-col rounded-t-xl bg-default pb-safe-bottom',
+            forceFullHeightOnMobile && 'h-full',
+          )}
           id={'popover/' + id}
           data-popover={id}
           data-mobile-popover
diff --git a/packages/web/src/javascripts/Components/Popover/Popover.tsx b/packages/web/src/javascripts/Components/Popover/Popover.tsx
index 7fa738fc9..9d46ec4bb 100644
--- a/packages/web/src/javascripts/Components/Popover/Popover.tsx
+++ b/packages/web/src/javascripts/Components/Popover/Popover.tsx
@@ -138,6 +138,7 @@ const Popover = (props: PopoverProps) => {
         title={props.title}
         className={props.className}
         id={popoverId}
+        forceFullHeightOnMobile={props.forceFullHeightOnMobile}
       >
         {props.children}
       </MobilePopoverContent>
diff --git a/packages/web/src/javascripts/Components/Popover/Types.ts b/packages/web/src/javascripts/Components/Popover/Types.ts
index 3500d07fc..0eda11b21 100644
--- a/packages/web/src/javascripts/Components/Popover/Types.ts
+++ b/packages/web/src/javascripts/Components/Popover/Types.ts
@@ -44,6 +44,7 @@ type CommonPopoverProps = {
   togglePopover?: () => void
   disableMobileFullscreenTakeover?: boolean
   disableFlip?: boolean
+  forceFullHeightOnMobile?: boolean
   title: string
   portal?: boolean
   offset?: number