Fix desktop layout and window controls at half-screen width (#1983)

* fix(app): preserve desktop layout in half-screen windows Treat native window controls as physical corner obstructions instead of deriving clearance from compact layout state. Keep 751px windows in desktop mode while preserving usable content when persisted sidebars are wide. * fix(app): retain sidebar width across window resizes * fix(app): yield app sidebar to narrow settings * test(app): wait for mobile sidebar motion to settle * fix(app): yield navigation to narrow workspace explorer * fix(app): mark sidebar sizing helpers as worklets * fix(app): hide app navigation when space is constrained
2026-07-14 23:01:14 +02:00
parent 1b8af2e58e
commit 50ed0d0ab1
27 changed files with 1263 additions and 718 deletions
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import type { AttachmentMetadata } from "@/attachments/types";
 import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
 import { isWeb } from "@/constants/platform";
+import { WindowChromeRootRegion, WindowChromeSafeArea } from "@/utils/desktop-window";

 interface AttachmentLightboxProps {
  metadata: AttachmentMetadata | null;
@@ -38,15 +39,18 @@ export function AttachmentLightbox({ metadata, onClose }: AttachmentLightboxProp
    };
  }, [metadata, onClose]);

-  const closeButtonStyle = useMemo(
+  const closeButtonRowStyle = useMemo(
    () => [
-      styles.closeButton,
+      styles.closeButtonRow,
      {
        top: insets.top + theme.spacing[3],
-        right: insets.right + theme.spacing[3],
      },
    ],
-    [insets.top, insets.right, theme.spacing],
+    [insets.top, theme.spacing],
+  );
+  const closeButtonStyle = useMemo(
+    () => [styles.closeButton, { marginRight: insets.right + theme.spacing[3] }],
+    [insets.right, theme.spacing],
  );

  const handleImageError = useCallback(() => setErrored(true), []);
@@ -61,42 +65,46 @@ export function AttachmentLightbox({ metadata, onClose }: AttachmentLightboxProp

  return (
    <Modal transparent animationType="fade" statusBarTranslucent visible onRequestClose={onClose}>
-      <View style={styles.root}>
-        <Pressable
-          testID="attachment-lightbox-backdrop"
-          accessibilityRole="button"
-          accessibilityLabel={t("message.attachments.dismissImage")}
-          onPress={onClose}
-          style={styles.backdrop}
-        />
-        <View style={styles.contentLayer}>
-          <View style={styles.imageArea}>
-            {hasError ? (
-              <Text style={styles.errorText}>{t("message.attachments.imageLoadFailed")}</Text>
-            ) : (
-              <Pressable onPress={noopPress} style={styles.imagePressable}>
-                <ExpoImage
-                  testID="attachment-lightbox-image"
-                  source={imageSource}
-                  contentFit="contain"
-                  onError={handleImageError}
-                  style={imageFillStyle}
-                />
-              </Pressable>
-            )}
-          </View>
+      <WindowChromeRootRegion corners="both">
+        <View style={styles.root}>
          <Pressable
-            testID="attachment-lightbox-close"
+            testID="attachment-lightbox-backdrop"
            accessibilityRole="button"
-            accessibilityLabel={t("message.attachments.closeImage")}
-            hitSlop={8}
+            accessibilityLabel={t("message.attachments.dismissImage")}
            onPress={onClose}
-            style={closeButtonStyle}
-          >
-            <X size={16} color={theme.colors.foregroundMuted} />
-          </Pressable>
+            style={styles.backdrop}
+          />
+          <View style={styles.contentLayer}>
+            <View style={styles.imageArea}>
+              {hasError ? (
+                <Text style={styles.errorText}>{t("message.attachments.imageLoadFailed")}</Text>
+              ) : (
+                <Pressable onPress={noopPress} style={styles.imagePressable}>
+                  <ExpoImage
+                    testID="attachment-lightbox-image"
+                    source={imageSource}
+                    contentFit="contain"
+                    onError={handleImageError}
+                    style={imageFillStyle}
+                  />
+                </Pressable>
+              )}
+            </View>
+            <WindowChromeSafeArea placement="inline" style={closeButtonRowStyle}>
+              <Pressable
+                testID="attachment-lightbox-close"
+                accessibilityRole="button"
+                accessibilityLabel={t("message.attachments.closeImage")}
+                hitSlop={8}
+                onPress={onClose}
+                style={closeButtonStyle}
+              >
+                <X size={16} color={theme.colors.foregroundMuted} />
+              </Pressable>
+            </WindowChromeSafeArea>
+          </View>
        </View>
-      </View>
+      </WindowChromeRootRegion>
    </Modal>
  );
 }
@@ -129,6 +137,13 @@ const styles = StyleSheet.create((theme) => ({
    bottom: 0,
    pointerEvents: "box-none",
  },
+  closeButtonRow: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "flex-end",
+    pointerEvents: "box-none",
+  },
  imageArea: {
    flex: 1,
    alignItems: "center",
@@ -148,7 +163,6 @@ const styles = StyleSheet.create((theme) => ({
    fontSize: theme.fontSize.sm,
  },
  closeButton: {
-    position: "absolute",
    width: 32,
    height: 32,
    borderRadius: 16,
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import {
+  canDesktopAppSidebarShare,
+  resolveDesktopAppContentMinimum,
+  resolveDesktopExplorerWidth,
+  resolveDesktopSidebarWidth,
+} from "@/components/desktop-sidebar-layout";
+
+describe("desktop sidebar layout", () => {
+  it("clamps a persisted wide sidebar to preserve the center pane", () => {
+    const atHalfScreen = resolveDesktopSidebarWidth({ requestedWidth: 600, viewportWidth: 751 });
+    expect(atHalfScreen).toBe(351);
+    expect(751 - atHalfScreen).toBe(400);
+
+    const atBreakpoint = resolveDesktopSidebarWidth({ requestedWidth: 600, viewportWidth: 720 });
+    expect(atBreakpoint).toBe(320);
+    expect(720 - atBreakpoint).toBe(400);
+
+    expect(resolveDesktopSidebarWidth({ requestedWidth: 600, viewportWidth: 1440 })).toBe(600);
+  });
+
+  it("keeps a temporarily narrow explorer render-only", () => {
+    expect(resolveDesktopExplorerWidth({ requestedWidth: 400, viewportWidth: 751 })).toBe(351);
+    expect(resolveDesktopExplorerWidth({ requestedWidth: 400, viewportWidth: 1440 })).toBe(400);
+  });
+
+  it("yields app navigation when settings or Explorer need the shell width", () => {
+    const settingsMinimum = resolveDesktopAppContentMinimum({
+      isSettingsRoute: true,
+      isWorkspaceExplorerOpen: false,
+      requestedExplorerWidth: 400,
+      viewportWidth: 751,
+    });
+    expect(settingsMinimum).toBe(720);
+    expect(
+      canDesktopAppSidebarShare({
+        contentMinimumWidth: settingsMinimum,
+        requestedSidebarWidth: 320,
+        viewportWidth: 751,
+      }),
+    ).toBe(false);
+
+    const explorerMinimum = resolveDesktopAppContentMinimum({
+      isSettingsRoute: false,
+      isWorkspaceExplorerOpen: true,
+      requestedExplorerWidth: 400,
+      viewportWidth: 751,
+    });
+    expect(explorerMinimum).toBe(751);
+    expect(
+      canDesktopAppSidebarShare({
+        contentMinimumWidth: explorerMinimum,
+        requestedSidebarWidth: 320,
+        viewportWidth: 751,
+      }),
+    ).toBe(false);
+    expect(
+      canDesktopAppSidebarShare({
+        contentMinimumWidth: resolveDesktopAppContentMinimum({
+          isSettingsRoute: false,
+          isWorkspaceExplorerOpen: true,
+          requestedExplorerWidth: 400,
+          viewportWidth: 1120,
+        }),
+        requestedSidebarWidth: 320,
+        viewportWidth: 1120,
+      }),
+    ).toBe(true);
+  });
+});
@@ -0,0 +1,78 @@
+import { SETTINGS_DESKTOP_SPLIT_MIN_WIDTH } from "@/constants/layout";
+import {
+  MAX_EXPLORER_SIDEBAR_WIDTH,
+  MAX_SIDEBAR_WIDTH,
+  MIN_EXPLORER_SIDEBAR_WIDTH,
+  MIN_SIDEBAR_WIDTH,
+} from "@/stores/panel-store";
+
+export const MIN_DESKTOP_CENTER_WIDTH = 400;
+
+function resolveDesktopPanelWidth(input: {
+  requestedWidth: number;
+  viewportWidth: number;
+  minimumWidth: number;
+  maximumWidth: number;
+}): number {
+  "worklet";
+  const maximumVisibleWidth = Math.max(
+    input.minimumWidth,
+    Math.min(input.maximumWidth, input.viewportWidth - MIN_DESKTOP_CENTER_WIDTH),
+  );
+  return Math.max(input.minimumWidth, Math.min(maximumVisibleWidth, input.requestedWidth));
+}
+
+export function resolveDesktopSidebarWidth(input: {
+  requestedWidth: number;
+  viewportWidth: number;
+}): number {
+  "worklet";
+  return resolveDesktopPanelWidth({
+    ...input,
+    minimumWidth: MIN_SIDEBAR_WIDTH,
+    maximumWidth: MAX_SIDEBAR_WIDTH,
+  });
+}
+
+export function resolveDesktopExplorerWidth(input: {
+  requestedWidth: number;
+  viewportWidth: number;
+}): number {
+  "worklet";
+  return resolveDesktopPanelWidth({
+    ...input,
+    minimumWidth: MIN_EXPLORER_SIDEBAR_WIDTH,
+    maximumWidth: MAX_EXPLORER_SIDEBAR_WIDTH,
+  });
+}
+
+export function resolveDesktopAppContentMinimum(input: {
+  isSettingsRoute: boolean;
+  isWorkspaceExplorerOpen: boolean;
+  requestedExplorerWidth: number;
+  viewportWidth: number;
+}): number {
+  const workspaceMinimum = input.isWorkspaceExplorerOpen
+    ? MIN_DESKTOP_CENTER_WIDTH +
+      resolveDesktopExplorerWidth({
+        requestedWidth: input.requestedExplorerWidth,
+        viewportWidth: input.viewportWidth,
+      })
+    : 0;
+  return Math.max(input.isSettingsRoute ? SETTINGS_DESKTOP_SPLIT_MIN_WIDTH : 0, workspaceMinimum);
+}
+
+export function canDesktopAppSidebarShare(input: {
+  contentMinimumWidth: number;
+  requestedSidebarWidth: number;
+  viewportWidth: number;
+}): boolean {
+  return (
+    input.viewportWidth -
+      resolveDesktopSidebarWidth({
+        requestedWidth: input.requestedSidebarWidth,
+        viewportWidth: input.viewportWidth,
+      }) >=
+    input.contentMinimumWidth
+  );
+}
@@ -22,13 +22,7 @@ import {
 } from "@/git/pull-request-panel";
 import { useCheckoutGitActionsStore } from "@/git/actions-store";
 import type { UsePrPaneDataResult } from "@/git/pull-request-panel/use-data";
-import {
-  usePanelStore,
-  selectIsFileExplorerOpen,
-  MIN_EXPLORER_SIDEBAR_WIDTH,
-  MAX_EXPLORER_SIDEBAR_WIDTH,
-  type ExplorerTab,
-} from "@/stores/panel-store";
+import { usePanelStore, selectIsFileExplorerOpen, type ExplorerTab } from "@/stores/panel-store";
 import { useToast } from "@/contexts/toast-context";
 import { useCloseFileExplorerGesture } from "@/mobile-panels/gestures";
 import { MobilePanelOverlay } from "@/mobile-panels/presentation";
@@ -36,13 +30,13 @@ 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";
+import { WindowChromeSafeArea } from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 import { RetainedPanelActivity } from "@/components/retained-panel";
 import { isWeb } from "@/constants/platform";
 import { buildWorkspaceAttachmentScopeKey } from "@/attachments/workspace-attachments-store";
+import { resolveDesktopExplorerWidth } from "@/components/desktop-sidebar-layout";

-const MIN_CHAT_WIDTH = 400;
 function logExplorerSidebar(_event: string, _details: Record<string, unknown>): void {}

 interface ExplorerSidebarProps {
@@ -163,18 +157,16 @@ export function ExplorerSidebar({
    isGit,
  });
  const { width: viewportWidth } = useWindowDimensions();
-  const startWidthRef = useRef(explorerWidth);
-  const resizeWidth = useSharedValue(explorerWidth);
+  const visibleExplorerWidth = resolveDesktopExplorerWidth({
+    requestedWidth: explorerWidth,
+    viewportWidth,
+  });
+  const startWidthRef = useRef(visibleExplorerWidth);
+  const resizeWidth = useSharedValue(visibleExplorerWidth);

  useEffect(() => {
-    const maxWidth = Math.max(
-      MIN_EXPLORER_SIDEBAR_WIDTH,
-      Math.min(MAX_EXPLORER_SIDEBAR_WIDTH, viewportWidth - MIN_CHAT_WIDTH),
-    );
-    if (explorerWidth > maxWidth) {
-      setExplorerWidth(maxWidth);
-    }
-  }, [explorerWidth, setExplorerWidth, viewportWidth]);
+    resizeWidth.value = visibleExplorerWidth;
+  }, [resizeWidth, visibleExplorerWidth]);

  const handleDesktopClose = useCallback(() => {
    logExplorerSidebar("handleClose", {
@@ -190,22 +182,20 @@ export function ExplorerSidebar({
        .enabled(true)
        .hitSlop({ left: 8, right: 8, top: 0, bottom: 0 })
        .onStart(() => {
-          startWidthRef.current = explorerWidth;
-          resizeWidth.value = explorerWidth;
+          startWidthRef.current = visibleExplorerWidth;
+          resizeWidth.value = visibleExplorerWidth;
        })
        .onUpdate((event) => {
          const newWidth = startWidthRef.current - event.translationX;
-          const maxWidth = Math.max(
-            MIN_EXPLORER_SIDEBAR_WIDTH,
-            Math.min(MAX_EXPLORER_SIDEBAR_WIDTH, viewportWidth - MIN_CHAT_WIDTH),
-          );
-          const clampedWidth = Math.max(MIN_EXPLORER_SIDEBAR_WIDTH, Math.min(maxWidth, newWidth));
-          resizeWidth.value = clampedWidth;
+          resizeWidth.value = resolveDesktopExplorerWidth({
+            requestedWidth: newWidth,
+            viewportWidth,
+          });
        })
        .onEnd(() => {
          runOnJS(setExplorerWidth)(resizeWidth.value);
        }),
-    [explorerWidth, resizeWidth, setExplorerWidth, viewportWidth],
+    [resizeWidth, setExplorerWidth, viewportWidth, visibleExplorerWidth],
  );

  const resizeAnimatedStyle = useAnimatedStyle(() => ({
@@ -300,7 +290,6 @@ function ExplorerSidebarContent({
  const { theme } = useUnistyles();
  const { t } = useTranslation();
  const toast = useToast();
-  const padding = useWindowControlsPadding("explorerSidebar");
  const canQueryPullRequest = isGit && Boolean(workspaceRoot);
  const prPane = usePrPaneData({
    serverId,
@@ -325,15 +314,15 @@ function ExplorerSidebarContent({
    [serverId, workspaceId, workspaceRoot],
  );

-  const headerStyle = useMemo(
-    () => [styles.header, { paddingRight: padding.right }],
-    [padding.right],
-  );
-
  return (
    <View style={styles.sidebarContent} pointerEvents="auto">
      {/* Header with tabs and close button */}
-      <View style={headerStyle} testID="explorer-header">
+      <WindowChromeSafeArea
+        placement="inline"
+        horizontalPadding={theme.spacing[2]}
+        style={styles.header}
+        testID="explorer-header"
+      >
        <TitlebarDragRegion />
        <View style={styles.tabsContainer}>
          {isGit && (
@@ -376,7 +365,7 @@ function ExplorerSidebarContent({
            </Pressable>
          )}
        </View>
-      </View>
+      </WindowChromeSafeArea>

      {/* Content based on active tab */}
      <View style={styles.contentArea} testID="explorer-content-area">
@@ -476,7 +465,6 @@ const styles = StyleSheet.create((theme) => ({
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
-    paddingHorizontal: theme.spacing[2],
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
  },
@@ -9,7 +9,7 @@ import {
  HEADER_TOP_PADDING_MOBILE,
  useIsCompactFormFactor,
 } from "@/constants/layout";
-import { useWindowControlsPadding } from "@/utils/desktop-window";
+import { WindowChromeSafeArea } from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";

 interface ScreenHeaderProps {
@@ -18,7 +18,6 @@ interface ScreenHeaderProps {
  leftStyle?: StyleProp<ViewStyle>;
  rightStyle?: StyleProp<ViewStyle>;
  borderless?: boolean;
-  windowControlsPaddingRole?: "header" | "detailHeader";
  onRowLayout?: (event: LayoutChangeEvent) => void;
 }

@@ -32,13 +31,11 @@ export function ScreenHeader({
  leftStyle,
  rightStyle,
  borderless,
-  windowControlsPaddingRole = "header",
  onRowLayout,
 }: ScreenHeaderProps) {
  const { theme } = useUnistyles();
  const insets = useSafeAreaInsets();
  const isMobile = useIsCompactFormFactor();
-  const padding = useWindowControlsPadding(windowControlsPaddingRole);
  // 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];
@@ -47,28 +44,23 @@ export function ScreenHeader({
    () => [styles.inner, { paddingTop: insets.top + topPadding }],
    [insets.top, topPadding],
  );
-  const rowStyle = useMemo(
-    () => [
-      styles.row,
-      {
-        paddingLeft: baseHorizontalPadding + padding.left,
-        paddingRight: baseHorizontalPadding + padding.right,
-      },
-      borderless && styles.borderless,
-    ],
-    [baseHorizontalPadding, padding.left, padding.right, borderless],
-  );
+  const rowStyle = useMemo(() => [styles.row, borderless && styles.borderless], [borderless]);
  const leftCombinedStyle = useMemo(() => [styles.left, leftStyle], [leftStyle]);
  const rightCombinedStyle = useMemo(() => [styles.right, rightStyle], [rightStyle]);

  return (
    <View style={styles.header}>
      <View style={innerStyle}>
-        <View onLayout={onRowLayout} style={rowStyle}>
+        <WindowChromeSafeArea
+          placement="inline"
+          horizontalPadding={baseHorizontalPadding}
+          onLayout={onRowLayout}
+          style={rowStyle}
+        >
          <TitlebarDragRegion />
          <View style={leftCombinedStyle}>{left}</View>
          <View style={rightCombinedStyle}>{right}</View>
-        </View>
+        </WindowChromeSafeArea>
      </View>
    </View>
  );
@@ -88,7 +80,6 @@ const styles = StyleSheet.create((theme) => ({
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
-    paddingHorizontal: theme.spacing[2],
    borderBottomWidth: theme.borderWidth[1],
    borderBottomColor: theme.colors.border,
    userSelect: "none",
@@ -25,6 +25,7 @@ import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-nativ
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
+import { resolveDesktopSidebarWidth } from "@/components/desktop-sidebar-layout";
 import { HostPicker } from "@/components/hosts/host-picker";
 import { SidebarHeaderRow } from "@/components/sidebar/sidebar-header-row";
 import { SidebarDisplayPreferencesMenu } from "@/components/sidebar/sidebar-display-preferences-menu";
@@ -50,13 +51,8 @@ import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { useHosts } from "@/runtime/host-runtime";
 import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
 import { useWorkspace } from "@/stores/session-store-hooks";
-import {
-  MAX_SIDEBAR_WIDTH,
-  MIN_SIDEBAR_WIDTH,
-  selectIsAgentListOpen,
-  usePanelStore,
-} from "@/stores/panel-store";
-import { useWindowControlsPadding } from "@/utils/desktop-window";
+import { selectIsAgentListOpen, usePanelStore } from "@/stores/panel-store";
+import { WindowChromeSafeArea } from "@/utils/desktop-window";
 import { useCloseAgentListGesture } from "@/mobile-panels/gestures";
 import { MobilePanelOverlay } from "@/mobile-panels/presentation";
 import {
@@ -73,8 +69,6 @@ import { SidebarAgentListSkeleton } from "./sidebar-agent-list-skeleton";
 import { SidebarCalloutSlot } from "./sidebar-callout-slot";
 import { SidebarWorkspaceList } from "./sidebar-workspace-list";

-const MIN_CHAT_WIDTH = 400;
-
 type SidebarTheme = ReturnType<typeof useUnistyles>["theme"];

 interface SidebarSharedProps {
@@ -603,6 +597,7 @@ function MobileSidebar({
      panelStyle={mobileSidebarInsetStyle}
    >
      <View style={styles.sidebarContent} pointerEvents="auto">
+        <WindowChromeSafeArea placement="below" />
        <View style={styles.sidebarHeaderGroup}>
          <SidebarNewWorkspaceHeaderRow
            label={labels.newWorkspace}
@@ -628,23 +623,25 @@ function MobileSidebar({
            variant="compact"
          />
        </View>
-        <Pressable
-          style={styles.mobileCloseButton}
-          onPress={closeSidebar}
-          testID="sidebar-close"
-          nativeID="sidebar-close"
-          accessible
-          accessibilityRole="button"
-          accessibilityLabel={labels.closeSidebar}
-          hitSlop={8}
-        >
-          {({ hovered, pressed }) => (
-            <X
-              size={theme.iconSize.md}
-              color={hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted}
-            />
-          )}
-        </Pressable>
+        <WindowChromeSafeArea placement="inline" style={styles.mobileCloseButtonRow}>
+          <Pressable
+            style={styles.mobileCloseButton}
+            onPress={closeSidebar}
+            testID="sidebar-close"
+            nativeID="sidebar-close"
+            accessible
+            accessibilityRole="button"
+            accessibilityLabel={labels.closeSidebar}
+            hitSlop={8}
+          >
+            {({ hovered, pressed }) => (
+              <X
+                size={theme.iconSize.md}
+                color={hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted}
+              />
+            )}
+          </Pressable>
+        </WindowChromeSafeArea>

        {isInitialLoad && !hasActiveHostFilter ? (
          <SidebarAgentListSkeleton />
@@ -713,47 +710,47 @@ function DesktopSidebar({
  const hasActiveHostFilter = useSidebarViewStore((state) => state.hostFilters.length > 0);
  const isSessionsActive = pathname.includes("/sessions");
  const isSchedulesActive = pathname.includes("/schedules");
-  const padding = useWindowControlsPadding("sidebar");
  const sidebarWidth = usePanelStore((state) => state.sidebarWidth);
  const setSidebarWidth = usePanelStore((state) => state.setSidebarWidth);
  const { width: viewportWidth } = useWindowDimensions();
+  const visibleSidebarWidth = resolveDesktopSidebarWidth({
+    requestedWidth: sidebarWidth,
+    viewportWidth,
+  });

-  const startWidthRef = useRef(sidebarWidth);
-  const resizeWidth = useSharedValue(sidebarWidth);
+  const startWidthRef = useRef(visibleSidebarWidth);
+  const resizeWidth = useSharedValue(visibleSidebarWidth);

  useEffect(() => {
-    resizeWidth.value = sidebarWidth;
-  }, [sidebarWidth, resizeWidth]);
+    resizeWidth.value = visibleSidebarWidth;
+  }, [resizeWidth, visibleSidebarWidth]);

  const resizeGesture = useMemo(
    () =>
      Gesture.Pan()
        .hitSlop({ left: 8, right: 8, top: 0, bottom: 0 })
        .onStart(() => {
-          startWidthRef.current = sidebarWidth;
-          resizeWidth.value = sidebarWidth;
+          startWidthRef.current = visibleSidebarWidth;
+          resizeWidth.value = visibleSidebarWidth;
        })
        .onUpdate((event) => {
          // Dragging right (positive translationX) increases width
          const newWidth = startWidthRef.current + event.translationX;
-          const maxWidth = Math.max(
-            MIN_SIDEBAR_WIDTH,
-            Math.min(MAX_SIDEBAR_WIDTH, viewportWidth - MIN_CHAT_WIDTH),
-          );
-          const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(maxWidth, newWidth));
-          resizeWidth.value = clampedWidth;
+          resizeWidth.value = resolveDesktopSidebarWidth({
+            requestedWidth: newWidth,
+            viewportWidth,
+          });
        })
        .onEnd(() => {
          runOnJS(setSidebarWidth)(resizeWidth.value);
        }),
-    [sidebarWidth, resizeWidth, setSidebarWidth, viewportWidth],
+    [resizeWidth, setSidebarWidth, viewportWidth, visibleSidebarWidth],
  );

  const resizeAnimatedStyle = useAnimatedStyle(() => ({
    width: resizeWidth.value,
  }));

-  const paddingTopSpacerStyle = useMemo(() => ({ height: padding.top }), [padding.top]);
  const desktopSidebarStyle = useMemo(
    () => [staticStyles.desktopSidebar, resizeAnimatedStyle],
    [resizeAnimatedStyle],
@@ -776,7 +773,7 @@ function DesktopSidebar({
      <View style={desktopSidebarBorderStyle}>
        <View style={styles.sidebarDragArea}>
          <TitlebarDragRegion />
-          {padding.top > 0 ? <View style={paddingTopSpacerStyle} /> : null}
+          <WindowChromeSafeArea placement="below" />
          <View style={styles.sidebarHeaderGroup}>
            <SidebarNewWorkspaceHeaderRow
              label={labels.newWorkspace}
@@ -960,11 +957,17 @@ const styles = StyleSheet.create((theme) => ({
    flex: 1,
    minHeight: 0,
  },
-  mobileCloseButton: {
+  mobileCloseButtonRow: {
    position: "absolute",
    top: theme.spacing[3],
-    right: theme.spacing[4],
+    left: 0,
+    right: 0,
    zIndex: 2,
+    alignItems: "flex-end",
+    pointerEvents: "box-none",
+  },
+  mobileCloseButton: {
+    marginRight: theme.spacing[4],
    width: 32,
    height: 32,
    alignItems: "center",
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { resolveSplitContainerRoot } from "@/components/split-container-focus";
+import type { SplitNode } from "@/stores/workspace-layout-store";
+
+const pane = (id: string): SplitNode => ({
+  kind: "pane",
+  pane: { id, tabIds: [], focusedTabId: null },
+});
+const root: SplitNode = {
+  kind: "group",
+  group: {
+    id: "root",
+    direction: "horizontal",
+    children: [pane("left"), pane("right")],
+    sizes: [0.5, 0.5],
+  },
+};
+
+describe("split focus root", () => {
+  it("renders only the valid focused pane in focus mode", () => {
+    expect(
+      resolveSplitContainerRoot({ root, focusedPaneId: "right", focusModeEnabled: true }),
+    ).toEqual({ root: pane("right"), usesFallbackStrip: false });
+  });
+
+  it("keeps the full tree and reserves the boundary strip when focus is missing", () => {
+    expect(
+      resolveSplitContainerRoot({ root, focusedPaneId: "missing", focusModeEnabled: true }),
+    ).toEqual({ root, usesFallbackStrip: true });
+  });
+
+  it("keeps normal splits unclaimed", () => {
+    expect(
+      resolveSplitContainerRoot({ root, focusedPaneId: "right", focusModeEnabled: false }),
+    ).toEqual({ root, usesFallbackStrip: false });
+  });
+});
@@ -0,0 +1,21 @@
+import type { SplitNode, SplitPane } from "@/stores/workspace-layout-store";
+
+export function resolveSplitContainerRoot(input: {
+  root: SplitNode;
+  focusedPaneId: string | null;
+  focusModeEnabled: boolean | undefined;
+}): { root: SplitNode; usesFallbackStrip: boolean } {
+  if (!input.focusModeEnabled) return { root: input.root, usesFallbackStrip: false };
+  const focusedPane = input.focusedPaneId ? findPane(input.root, input.focusedPaneId) : null;
+  if (!focusedPane) return { root: input.root, usesFallbackStrip: true };
+  return { root: { kind: "pane", pane: focusedPane }, usesFallbackStrip: false };
+}
+
+function findPane(node: SplitNode, paneId: string): SplitPane | null {
+  if (node.kind === "pane") return node.pane.id === paneId ? node.pane : null;
+  for (const child of node.group.children) {
+    const pane = findPane(child, paneId);
+    if (pane) return pane;
+  }
+  return null;
+}
@@ -32,8 +32,14 @@ import { useTranslation } from "react-i18next";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { ResizeHandle } from "@/components/resize-handle";
 import { RetainedPanel } from "@/components/retained-panel";
+import { resolveSplitContainerRoot } from "@/components/split-container-focus";
 import { shouldFocusPaneFromEventTarget } from "@/components/split-container-pane-focus";
-import { useWindowControlsPadding } from "@/utils/desktop-window";
+import {
+  WindowChromeRegion,
+  WindowChromeSafeArea,
+  useWindowChromeCorners,
+  type WindowChromeCorners,
+} from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 import {
  computeTabDropPreview,
@@ -158,6 +164,7 @@ interface SplitNodeViewProps extends Omit<SplitContainerProps, "layout" | "onMov
  showDropZones: boolean;
  dropPreview: SplitDropZoneHover | null;
  tabDropPreview: TabDropPreview | null;
+  windowChromeCorners: WindowChromeCorners;
 }

 interface SplitPaneViewProps extends Omit<
@@ -169,6 +176,7 @@ interface SplitPaneViewProps extends Omit<
  | "showDropZones"
  | "dropPreview"
  | "onResizeSplit"
+  | "windowChromeCorners"
 > {
  pane: SplitPane;
  uiTabs: WorkspaceTab[];
@@ -383,6 +391,8 @@ export function SplitContainer({
  renderPaneEmptyState = () => null,
  focusModeEnabled,
 }: SplitContainerProps) {
+  const inheritedWindowChromeCorners = useWindowChromeCorners();
+  const windowChromeCorners = focusModeEnabled ? inheritedWindowChromeCorners : "none";
  const [activeDragTabId, setActiveDragTabId] = useState<string | null>(null);
  const [dropPreview, setDropPreview] = useState<SplitDropZoneHover | null>(null);
  const [tabDropPreview, setTabDropPreview] = useState<TabDropPreview | null>(null);
@@ -399,18 +409,16 @@ export function SplitContainer({
  );

  const panesById = useMemo(() => collectPanesById(layout.root), [layout.root]);
-
-  const effectiveRoot = useMemo(() => {
-    if (!focusModeEnabled) {
-      return layout.root;
-    }
-    const focusedPane = layout.focusedPaneId ? panesById.get(layout.focusedPaneId) : null;
-    if (!focusedPane) {
-      return layout.root;
-    }
-    return { kind: "pane" as const, pane: focusedPane };
-  }, [focusModeEnabled, layout.root, layout.focusedPaneId, panesById]);
-  const renderRoot = useMemo(() => wrapRootPaneForStableMount(effectiveRoot), [effectiveRoot]);
+  const splitRoot = useMemo(
+    () =>
+      resolveSplitContainerRoot({
+        root: layout.root,
+        focusedPaneId: layout.focusedPaneId,
+        focusModeEnabled,
+      }),
+    [focusModeEnabled, layout.focusedPaneId, layout.root],
+  );
+  const renderRoot = useMemo(() => wrapRootPaneForStableMount(splitRoot.root), [splitRoot.root]);

  const handleDragStart = useCallback((event: DragStartEvent) => {
    const data = asWorkspaceTabDragData(event.active.data.current);
@@ -565,6 +573,7 @@ export function SplitContainer({
        onDragCancel={handleDragCancel}
        onDragEnd={handleDragEnd}
      >
+        {splitRoot.usesFallbackStrip && <WindowChromeSafeArea placement="below" />}
        <SplitNodeView
          node={renderRoot}
          workspaceKey={workspaceKey}
@@ -601,6 +610,7 @@ export function SplitContainer({
          showDropZones={activeDragTabId !== null}
          dropPreview={dropPreview}
          tabDropPreview={tabDropPreview}
+          windowChromeCorners={splitRoot.usesFallbackStrip ? "none" : windowChromeCorners}
        />
        <DragOverlay dropAnimation={null}>
          {activeDragTabId ? (
@@ -744,6 +754,7 @@ function SplitNodeView({
  showDropZones,
  dropPreview,
  tabDropPreview,
+  windowChromeCorners,
 }: SplitNodeViewProps) {
  const groupId = node.kind === "group" ? node.group.id : null;
  const groupDirection = node.kind === "group" ? node.group.direction : null;
@@ -762,41 +773,43 @@ function SplitNodeView({

  if (node.kind === "pane") {
    return (
-      <SplitPaneView
-        pane={node.pane}
-        uiTabs={uiTabs}
-        isFocused={node.pane.id === focusedPaneId}
-        normalizedServerId={normalizedServerId}
-        normalizedWorkspaceId={normalizedWorkspaceId}
-        isWorkspaceFocused={isWorkspaceFocused}
-        hoveredCloseTabKey={hoveredCloseTabKey}
-        setHoveredCloseTabKey={setHoveredCloseTabKey}
-        closingTabIds={closingTabIds}
-        onNavigateTab={onNavigateTab}
-        onCloseTab={onCloseTab}
-        onCopyResumeCommand={onCopyResumeCommand}
-        onCopyAgentId={onCopyAgentId}
-        onCopyFilePath={onCopyFilePath}
-        onReloadAgent={onReloadAgent}
-        onRenameTab={onRenameTab}
-        onCloseTabsToLeft={onCloseTabsToLeft}
-        onCloseTabsToRight={onCloseTabsToRight}
-        onCloseOtherTabs={onCloseOtherTabs}
-        onCreateDraftTab={onCreateDraftTab}
-        onCreateTerminalTab={onCreateTerminalTab}
-        onCreateBrowserTab={onCreateBrowserTab}
-        showCreateBrowserTab={showCreateBrowserTab}
-        buildPaneContentModel={buildPaneContentModel}
-        onFocusPane={onFocusPane}
-        onSplitPane={onSplitPane}
-        onSplitPaneEmpty={onSplitPaneEmpty}
-        onReorderTabsInPane={onReorderTabsInPane}
-        renderPaneEmptyState={renderPaneEmptyState}
-        activeDragTabId={activeDragTabId}
-        showDropZones={showDropZones}
-        dropPreview={dropPreview}
-        tabDropPreview={tabDropPreview}
-      />
+      <WindowChromeRegion corners={windowChromeCorners}>
+        <SplitPaneView
+          pane={node.pane}
+          uiTabs={uiTabs}
+          isFocused={node.pane.id === focusedPaneId}
+          normalizedServerId={normalizedServerId}
+          normalizedWorkspaceId={normalizedWorkspaceId}
+          isWorkspaceFocused={isWorkspaceFocused}
+          hoveredCloseTabKey={hoveredCloseTabKey}
+          setHoveredCloseTabKey={setHoveredCloseTabKey}
+          closingTabIds={closingTabIds}
+          onNavigateTab={onNavigateTab}
+          onCloseTab={onCloseTab}
+          onCopyResumeCommand={onCopyResumeCommand}
+          onCopyAgentId={onCopyAgentId}
+          onCopyFilePath={onCopyFilePath}
+          onReloadAgent={onReloadAgent}
+          onRenameTab={onRenameTab}
+          onCloseTabsToLeft={onCloseTabsToLeft}
+          onCloseTabsToRight={onCloseTabsToRight}
+          onCloseOtherTabs={onCloseOtherTabs}
+          onCreateDraftTab={onCreateDraftTab}
+          onCreateTerminalTab={onCreateTerminalTab}
+          onCreateBrowserTab={onCreateBrowserTab}
+          showCreateBrowserTab={showCreateBrowserTab}
+          buildPaneContentModel={buildPaneContentModel}
+          onFocusPane={onFocusPane}
+          onSplitPane={onSplitPane}
+          onSplitPaneEmpty={onSplitPaneEmpty}
+          onReorderTabsInPane={onReorderTabsInPane}
+          renderPaneEmptyState={renderPaneEmptyState}
+          activeDragTabId={activeDragTabId}
+          showDropZones={showDropZones}
+          dropPreview={dropPreview}
+          tabDropPreview={tabDropPreview}
+        />
+      </WindowChromeRegion>
    );
  }

@@ -843,6 +856,7 @@ function SplitNodeView({
              showDropZones={showDropZones}
              dropPreview={dropPreview}
              tabDropPreview={tabDropPreview}
+              windowChromeCorners={windowChromeCorners}
            />
          </SplitGroupChild>
          {index < node.group.children.length - 1 ? (
@@ -898,7 +912,6 @@ function SplitPaneView({
  const { theme: _theme } = useUnistyles();
  const paneRef = useRef<View | null>(null);
  const stableOnFocusPane = useStableEvent(onFocusPane);
-  const padding = useWindowControlsPadding("tabRow");
  const paneState = useMemo(
    () =>
      deriveWorkspacePaneState({
@@ -995,15 +1008,11 @@ function SplitPaneView({
    () => onSplitPaneEmpty({ targetPaneId: paneId, position: "bottom" }),
    [onSplitPaneEmpty, paneId],
  );
-  const paneTabsStyle = useMemo(
-    () => [styles.paneTabs, { paddingLeft: padding.left, paddingRight: padding.right }],
-    [padding.left, padding.right],
-  );

  return (
    <RenderProfile id={`SplitPaneView:${pane.id}`}>
      <View ref={paneRef} collapsable={false} style={styles.pane}>
-        <View style={paneTabsStyle}>
+        <WindowChromeSafeArea placement="inline" style={styles.paneTabs}>
          <TitlebarDragRegion />
          <WorkspaceDesktopTabsRow
            paneId={pane.id}
@@ -1035,7 +1044,7 @@ function SplitPaneView({
              tabDropPreview?.paneId === pane.id ? tabDropPreview.indicatorIndex : null
            }
          />
-        </View>
+        </WindowChromeSafeArea>

        <View style={styles.paneContent}>
          {mountedPaneTabIds.length > 0