fix: Fixed issue on desktop where custom titlebar would overlap with preferences view header

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

@@ -114,18 +114,6 @@ async function configureWindow(remoteBridge: CrossProcessBridge) {
   if (isMacOS || useSystemMenuBar) {
     // !important is important here because #desktop-title-bar has display: flex.
     sheet.insertRule('#desktop-title-bar { display: none !important; }', sheet.cssRules.length)
-  } else {
-    /* Use custom title bar. Take the sn-titlebar-height off of
-    the app content height so its not overflowing */
-    sheet.insertRule(
-      'body, [data-dialog], [data-mobile-popover] { padding-top: var(--sn-desktop-titlebar-height) !important; }',
-      sheet.cssRules.length,
-    )
-    sheet.insertRule(
-      `.main-ui-view { height: calc(100vh - var(--sn-desktop-titlebar-height)) !important;
-        min-height: calc(100vh - var(--sn-desktop-titlebar-height)) !important; }`,
-      sheet.cssRules.length,
-    )
   }
 }
 

packages/desktop/app/stylesheets/renderer.css

@@ -37,7 +37,6 @@ panel-resizer {
   display: flex;
   justify-content: space-between;
   z-index: 99999;
-  position: absolute;
   width: 100%;
   top: 0;
 }
@@ -84,3 +83,14 @@ input,
 .panel-resizer {
   -webkit-app-region: no-drag;
 }
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+#app-group-root {
+  min-height: 0;
+}

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

@@ -6,32 +6,39 @@ import { useModalAnimation } from '../Modal/useModalAnimation'
 type Props = {
   isOpen: boolean
   children: ReactNode
+  portal?: boolean
 }
 
-const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-  const [isMounted, setElement] = useModalAnimation(isOpen)
-  const dialog = useDialogStore({
-    open: isMounted,
-  })
+const ModalOverlay = forwardRef(
+  ({ isOpen, children, portal = true, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+    const [isMounted, setElement] = useModalAnimation(isOpen)
+    const dialog = useDialogStore({
+      open: isMounted,
+    })
 
-  if (!isMounted) {
-    return null
-  }
+    if (!isMounted) {
+      return null
+    }
 
-  return (
-    <Dialog
-      tabIndex={0}
-      className="h-full w-full"
-      backdropProps={{
-        className: '!z-modal',
-      }}
-      ref={mergeRefs([setElement, ref])}
-      store={dialog}
-      {...props}
-    >
-      {children}
-    </Dialog>
-  )
-})
+    return (
+      <Dialog
+        tabIndex={0}
+        className="h-full w-full"
+        backdropProps={{
+          className: '!z-modal',
+          style: {
+            position: !portal ? 'absolute' : 'fixed',
+          },
+        }}
+        ref={mergeRefs([setElement, ref])}
+        store={dialog}
+        portal={portal}
+        {...props}
+      >
+        {children}
+      </Dialog>
+    )
+  },
+)
 
 export default ModalOverlay

packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx

@@ -20,7 +20,7 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
   }, [commandService, viewControllerManager])
 
   return (
-    <ModalOverlay isOpen={viewControllerManager.preferencesController.isOpen}>
+    <ModalOverlay isOpen={viewControllerManager.preferencesController.isOpen} portal={false}>
       <PreferencesView
         closePreferences={() => viewControllerManager.preferencesController.closePreferences()}
         application={application}