fix(app): centralize window controls padding into useWindowControlsPadding hook

Replaces useTrafficLightPadding with a role-based useWindowControlsPadding
hook that absorbs all layout-conditional logic (sidebar state, focus mode,
explorer state). Consumers no longer make platform or layout decisions —
they just apply the resolved padding values.

Fixes Windows title bar overlay buttons overlapping source control icons
when the left sidebar is open, and right padding not shifting to the
explorer sidebar header when it's open.

Also fixes borderless header using borderBottomWidth:0 (layout shift)
instead of transparent, and double-click-to-maximize bounce on the
open project screen caused by nested drag handlers.

packages/app/src/components/explorer-sidebar.tsx

@@ -17,6 +17,7 @@ import { HEADER_INNER_HEIGHT } from "@/constants/layout";
 import { GitDiffPane } from "./git-diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
+import { useWindowControlsPadding } from "@/utils/desktop-window";
 
 const MIN_CHAT_WIDTH = 400;
 function logExplorerSidebar(_event: string, _details: Record<string, unknown>): void {}
@@ -336,12 +337,13 @@ function SidebarContent({
   onOpenFile,
 }: SidebarContentProps) {
   const { theme } = useUnistyles();
+  const padding = useWindowControlsPadding("explorerSidebar");
   const resolvedTab: ExplorerTab = !isGit && activeTab === "changes" ? "files" : activeTab;
 
   return (
     <View style={styles.sidebarContent} pointerEvents="auto">
       {/* Header with tabs and close button */}
-      <View style={styles.header} testID="explorer-header">
+      <View style={[styles.header, { paddingRight: padding.right }]} testID="explorer-header">
         <View style={styles.tabsContainer}>
           {isGit && (
             <Pressable

packages/app/src/components/headers/screen-header.tsx

@@ -7,8 +7,7 @@ import {
   HEADER_INNER_HEIGHT_MOBILE,
   HEADER_TOP_PADDING_MOBILE,
 } from "@/constants/layout";
-import { useDesktopDragHandlers, useTrafficLightPadding } from "@/utils/desktop-window";
+import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
-import { usePanelStore } from "@/stores/panel-store";
 
 interface ScreenHeaderProps {
   left?: ReactNode;
@@ -26,15 +25,10 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }:
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
+  const padding = useWindowControlsPadding("header");
-  const trafficLightPadding = useTrafficLightPadding();
   // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets
   const topPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;
   const baseHorizontalPadding = theme.spacing[2];
-  const collapsedSidebarInset =
-    !isMobile && !desktopAgentListOpen && trafficLightPadding.side
-      ? trafficLightPadding
-      : { left: 0, right: 0 };
 
   const dragHandlers = useDesktopDragHandlers();
 
@@ -45,8 +39,8 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }:
           style={[
             styles.row,
             {
-              paddingLeft: baseHorizontalPadding + collapsedSidebarInset.left,
+              paddingLeft: baseHorizontalPadding + padding.left,
-              paddingRight: baseHorizontalPadding + collapsedSidebarInset.right,
+              paddingRight: baseHorizontalPadding + padding.right,
             },
             borderless && styles.borderless,
           ]}
@@ -90,6 +84,6 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   borderless: {
-    borderBottomWidth: 0,
+    borderBottomColor: "transparent",
   },
 }));

packages/app/src/components/left-sidebar.tsx

@@ -35,7 +35,7 @@ import {
   type SidebarProjectEntry,
 } from "@/hooks/use-sidebar-workspaces-list";
 import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
-import { useDesktopDragHandlers, useTrafficLightPadding } from "@/utils/desktop-window";
+import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
 import { Combobox } from "@/components/ui/combobox";
 import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
 import { formatConnectionStatus } from "@/utils/daemons";
@@ -632,7 +632,7 @@ function DesktopSidebar({
 }: DesktopSidebarProps) {
   const newAgentKeys = useShortcutKeys("new-agent");
   const dragHandlers = useDesktopDragHandlers();
-  const trafficLightPadding = useTrafficLightPadding();
+  const padding = useWindowControlsPadding("sidebar");
   const sidebarWidth = usePanelStore((state) => state.sidebarWidth);
   const setSidebarWidth = usePanelStore((state) => state.setSidebarWidth);
   const { width: viewportWidth } = useWindowDimensions();
@@ -682,9 +682,7 @@ function DesktopSidebar({
 
   return (
     <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle]}>
-      {trafficLightPadding.side === 'left' ? (
+      {padding.top > 0 ? <View style={{ height: padding.top }} {...dragHandlers} /> : null}
-        <View style={{ height: trafficLightPadding.top }} {...dragHandlers} />
-      ) : null}
       <View style={styles.sidebarHeader} {...dragHandlers}>
         <View style={styles.sidebarHeaderRow}>
           <SessionsButton onPress={handleViewMore} />

packages/app/src/components/split-container.tsx

@@ -32,7 +32,7 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { ResizeHandle } from "@/components/resize-handle";
 import { shouldFocusPaneFromEventTarget } from "@/components/split-container-pane-focus";
 import { usePanelStore } from "@/stores/panel-store";
-import { useTrafficLightPadding } from "@/utils/desktop-window";
+import { useWindowControlsPadding } from "@/utils/desktop-window";
 import {
   computeTabDropPreview,
   type TabDropPreview,
@@ -809,8 +809,7 @@ function SplitPaneView({
   const { theme } = useUnistyles();
   const paneRef = useRef<View | null>(null);
   const stableOnFocusPane = useStableEvent(onFocusPane);
-  const isFocusModeEnabled = usePanelStore((s) => s.desktop.focusModeEnabled);
+  const padding = useWindowControlsPadding("tabRow");
-  const trafficLightPadding = useTrafficLightPadding();
   const paneState = useMemo(
     () =>
       deriveWorkspacePaneState({
@@ -885,11 +884,7 @@ function SplitPaneView({
       <View
         style={[
           styles.paneTabs,
-          isFocusModeEnabled &&
+          { paddingLeft: padding.left, paddingRight: padding.right },
-            trafficLightPadding.side && {
-              paddingLeft: trafficLightPadding.left,
-              paddingRight: trafficLightPadding.right,
-            },
         ]}
       >
         <WorkspaceDesktopTabsRow

packages/app/src/constants/layout.ts

@@ -60,14 +60,3 @@ export function getIsDesktop(): boolean {
   }
   return result;
 }
-
-// Get traffic light padding values (only non-zero on desktop macOS)
-export function getTrafficLightPadding(): { left: number; top: number } {
-  if (!getIsDesktopMac()) {
-    return { left: 0, top: 0 };
-  }
-  return {
-    left: DESKTOP_TRAFFIC_LIGHT_WIDTH,
-    top: DESKTOP_TRAFFIC_LIGHT_HEIGHT,
-  };
-}

packages/app/src/screens/open-project-screen.tsx

@@ -26,9 +26,9 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
   }, [isMobile, openAgentList]);
 
   return (
-    <View style={styles.container} {...dragHandlers}>
+    <View style={styles.container}>
       <MenuHeader borderless />
-      <View style={styles.content}>
+      <View style={styles.content} {...dragHandlers}>
         <View style={styles.logo}>
           <PaseoLogo size={56} />
         </View>

packages/app/src/utils/desktop-window.ts

@@ -10,6 +10,7 @@ import {
 } from "@/constants/layout";
 import { getDesktopWindow } from "@/desktop/electron/window";
 import { isDesktop } from "@/desktop/host";
+import { usePanelStore } from "@/stores/panel-store";
 import { readFiniteScreenPoint } from "./desktop-window-drag-coordinates";
 
 export async function toggleMaximize() {
@@ -123,7 +124,15 @@ export function useDesktopDragHandlers(): DesktopDragViewProps {
   }, [isActive]);
 }
 
-export function useTrafficLightPadding(): { left: number; right: number; top: number; side: 'left' | 'right' | null } {
+type RawWindowControlsPadding = {
+  left: number;
+  right: number;
+  top: number;
+};
+
+type WindowControlsPaddingRole = "sidebar" | "header" | "tabRow" | "explorerSidebar";
+
+function useRawWindowControlsPadding(): RawWindowControlsPadding {
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
@@ -178,23 +187,52 @@ export function useTrafficLightPadding(): { left: number; right: number; top: nu
     };
   }, []);
 
-  if (!getIsDesktop() || isFullscreen) {
+  return useMemo((): RawWindowControlsPadding => {
-    return { left: 0, right: 0, top: 0, side: null };
+    if (!getIsDesktop() || isFullscreen) {
-  }
+      return { left: 0, right: 0, top: 0 };
+    }
+
+    if (getIsDesktopMac()) {
+      return {
+        left: DESKTOP_TRAFFIC_LIGHT_WIDTH,
+        right: 0,
+        top: DESKTOP_TRAFFIC_LIGHT_HEIGHT,
+      };
+    }
 
-  if (getIsDesktopMac()) {
     return {
-      left: DESKTOP_TRAFFIC_LIGHT_WIDTH,
+      left: 0,
-      right: 0,
+      right: DESKTOP_WINDOW_CONTROLS_WIDTH,
-      top: DESKTOP_TRAFFIC_LIGHT_HEIGHT,
+      top: DESKTOP_WINDOW_CONTROLS_HEIGHT,
-      side: 'left',
     };
+  }, [isFullscreen]);
+}
+
+export function useWindowControlsPadding(
+  role: WindowControlsPaddingRole,
+): { left: number; right: number; top: number } {
+  const sidebarOpen = usePanelStore((state) => state.desktop.agentListOpen);
+  const explorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
+  const focusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
+  const rawPadding = useRawWindowControlsPadding();
+  const sidebarClosed = !sidebarOpen;
+
+  let left = 0;
+  let right = 0;
+  let top = 0;
+
+  if (role === "sidebar") {
+    left = rawPadding.left;
+    top = rawPadding.top;
+  } else if (role === "header") {
+    left = sidebarClosed ? rawPadding.left : 0;
+    right = explorerOpen ? 0 : rawPadding.right;
+  } else if (role === "tabRow") {
+    left = sidebarClosed && focusModeEnabled ? rawPadding.left : 0;
+    right = focusModeEnabled && !explorerOpen ? rawPadding.right : 0;
+  } else if (role === "explorerSidebar") {
+    right = rawPadding.right;
   }
 
-  return {
+  return useMemo(() => ({ left, right, top }), [left, right, top]);
-    left: 0,
-    right: DESKTOP_WINDOW_CONTROLS_WIDTH,
-    top: DESKTOP_WINDOW_CONTROLS_HEIGHT,
-    side: 'right',
-  };
 }