fix: Fixed issue where some menus would get hidden behind the keyboard on iOS

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>

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

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>

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