fix: Fixed issue where popover/modal headers would get cut off by desktop titlebar

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -17,11 +17,13 @@ const MobilePopoverContent = ({
   children,
   title,
   className,
+  id,
 }: {
   open: boolean
   requestClose: () => void
   children: ReactNode
   title: string
+  id: string
   className?: string
 }) => {
   const [isMounted, setPopoverElement] = useModalAnimation(open)
@@ -36,6 +38,8 @@ const MobilePopoverContent = ({
       <div
         ref={setPopoverElement}
         className="fixed top-0 left-0 z-modal flex h-full w-full flex-col bg-default pt-safe-top pb-safe-bottom"
+        data-popover={id}
+        data-mobile-popover
       >
         <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] gap-2 border-b border-border py-1.5 px-2 text-base">
           <div />

packages/web/src/javascripts/Components/Popover/Popover.tsx

@@ -102,6 +102,7 @@ const Popover = ({
         }}
         title={title}
         className={className}
+        id={popoverId.current}
       >
         {children}
       </MobilePopoverContent>