From 21e1e73beef7770ea50649829c7a42c7607b5966 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Tue, 21 Jan 2025 11:35:47 +0500
Subject: [PATCH] desktop: fix ui when native titlebar is enabled

---
 apps/web/src/app.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index cf99c7a005..22c7ca332a 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -23,6 +23,7 @@ import { ScopedThemeProvider } from "./components/theme-provider";
 import useMobile from "./hooks/use-mobile";
 import useTablet from "./hooks/use-tablet";
 import { useStore } from "./stores/app-store";
+import { useStore as useSettingStore } from "./stores/setting-store";
 import { Toaster } from "react-hot-toast";
 import NavigationMenu from "./components/navigation-menu";
 import StatusBar from "./components/status-bar";
@@ -54,6 +55,8 @@ function App() {
   const isFocusMode = useStore((store) => store.isFocusMode);
   const { isFocused } = useWindowFocus();
   const { isFullscreen } = useWindowControls();
+  const hasNativeTitlebar =
+    useSettingStore.getState().desktopIntegrationSettings?.nativeTitlebar;
   console.timeEnd("loading app");
 
   return (
@@ -70,13 +73,14 @@ function App() {
         `}
         />
       )}
-      {IS_DESKTOP_APP && isMac() && !isFullscreen ? (
+      {IS_DESKTOP_APP && isMac() && !isFullscreen && !hasNativeTitlebar ? (
         <Global
           // These styles to make sure the app content doesn't overlap with the traffic lights.
           styles={`
             .nav-pane,
             .mobile-nav-pane {
               margin-top: env(titlebar-area-height) !important;
+              height: calc(100% - env(titlebar-area-height)) !important;
             }
             .nav-pane.collapsed + .list-pane .route-container-header,
             .nav-pane.collapsed + .list-pane.collapsed + .editor-pane .editor-action-bar,
@@ -307,7 +311,7 @@ function MobileAppContents() {
           flexShrink: 0
         }}
       >
-        <NavigationMenu toggleNavigationContainer={() => { }} isTablet={false} />
+        <NavigationMenu toggleNavigationContainer={() => {}} isTablet={false} />
       </Flex>
       <Flex
         className="mobile-list-pane"