From 3ade9ee64134d3fa327ae2a97c139ddbfd1a746a Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 9 Jul 2025 17:36:05 +0530
Subject: [PATCH] [WEB-4462] improvement: UI enhancements for desktop app to
 support side rail (#3608)

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
---
 apps/web/ee/components/desktop/root.tsx | 6 +-----
 apps/web/styles/globals.css             | 6 ++----
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/apps/web/ee/components/desktop/root.tsx b/apps/web/ee/components/desktop/root.tsx
index 09b6453713..19b05b0e0c 100644
--- a/apps/web/ee/components/desktop/root.tsx
+++ b/apps/web/ee/components/desktop/root.tsx
@@ -7,24 +7,20 @@ import { isDesktopApp } from "@todesktop/client-core/platform/todesktop";
 import { observer } from "mobx-react";
 // helpers
 import { cn } from "@plane/utils";
-// hooks
-import { useAppTheme } from "@/hooks/store";
 // desktop app components
 import { SidebarToggle, DesktopAppNavigation, useDesktopApp, DesktopAppProvider } from "@/plane-web/components/desktop";
 
 const DesktopAppRoot: FC = observer(() => {
   // store hooks
-  const { sidebarCollapsed } = useAppTheme();
   const { pageTitle, isFullScreen } = useDesktopApp();
 
   return (
     <>
-      <div className="header fixed top-0 left-0 flex gap-4 items-center w-full h-9">
+      <div className="header fixed top-0 left-0 flex gap-4 items-center w-full h-8">
         <div
           className={cn(
             "flex flex-shrink-0 gap-0.5 items-center justify-end w-[160px] transition-all duration-300 ease-in-out",
             {
-              "md:w-[250px]": !sidebarCollapsed,
               "pl-3 justify-start": isFullScreen,
             }
           )}
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index d91c22de77..15554c678f 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1006,8 +1006,7 @@ div.web-view-spinner div.bar12 {
 html.todesktop body {
   height: 100vh;
   width: 100%;
-  padding: 8px;
-  padding-top: 36px;
+  padding-top: 32px;
 }
 
 html.todesktop .app-container {
@@ -1017,11 +1016,10 @@ html.todesktop .app-container {
   contain: layout style size;
   contain-intrinsic-size: 100%;
   position: relative; /* Ensure it's the containing block */
-  border: 1px solid rgb(var(--color-border-200));
-  border-radius: 6px;
 }
 
 html.todesktop .header {
+  background-color: rgb(var(--color-background-90));
   -webkit-app-region: drag;
 }