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

packages/desktop/app/javascripts/Main/Window.ts

@@ -202,7 +202,7 @@ async function createWindowServices(window: Electron.BrowserWindow, appState: Ap
   initializeZoomManager(window, appState.store)
 
   const backupsManager = createBackupsManager(window.webContents, appState)
-  const updateManager = setupUpdates(window, appState, backupsManager)
+  // const updateManager = setupUpdates(window, appState, backupsManager)
   const trayManager = createTrayManager(window, appState.store)
   const spellcheckerManager = createSpellcheckerManager(appState.store, window.webContents, appLocale)
   const mediaManager = new MediaManager()
@@ -224,7 +224,7 @@ async function createWindowServices(window: Electron.BrowserWindow, appState: Ap
 
   return {
     backupsManager,
-    updateManager,
+    // updateManager,
     trayManager,
     spellcheckerManager,
     menuManager,

packages/desktop/app/javascripts/Renderer/Renderer.ts

@@ -117,9 +117,8 @@ async function configureWindow(remoteBridge: CrossProcessBridge) {
   } else {
     /* Use custom title bar. Take the sn-titlebar-height off of
     the app content height so its not overflowing */
-    sheet.insertRule('body { padding-top: var(--sn-desktop-titlebar-height); }', sheet.cssRules.length)
     sheet.insertRule(
-      '@media screen and (max-width: 768px) { [data-popover] { padding-top: calc(var(--sn-desktop-titlebar-height) + 0.5rem); } }',
+      'body, [data-reach-dialog-overlay], [data-mobile-popover] { padding-top: var(--sn-desktop-titlebar-height) !important; }',
       sheet.cssRules.length,
     )
     sheet.insertRule(

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>

packages/web/src/javascripts/Components/Shared/Modal.tsx

@@ -136,7 +136,7 @@ const Modal = ({ title, close, actions = [], className = {}, customHeader, custo
                       togglePopover={() => setShowAdvanced((show) => !show)}
                       align="start"
                       portal={false}
-                      className="w-1/2 !min-w-0 divide-y divide-border border border-border"
+                      className="!fixed w-1/2 !min-w-0 divide-y divide-border border border-border"
                     >
                       {extraActions
                         .filter((action) => action.type !== 'cancel')