fix(mobile): the iPad inspector hides the sidebar where the page would get too narrow

On iOS 26 the native inspector column opened beside the sidebar at any width,
so a portrait 13" iPad left the thread about 290pt. The JS columns already
step the sidebar aside when the page would drop under 560pt; the native path
was exempt because UIKit sizes its inspector column on its own.

The shell now owns the native inspector's width and applies the same rule
with a 320pt floor: landscape 11" and 13" iPads keep three columns, portrait
iPads and the landscape mini show the thread and inspector, and the sidebar
button closes the inspector to bring the sidebar back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: juliusmarminge

apps/mobile/src/features/layout/AdaptiveWorkspaceLayout.tsx

@@ -46,6 +46,7 @@ import {
   deriveWorkspacePaneLayout,
   isPrimarySidebarPinned,
   isWorkspaceListPath,
+  nativeInspectorColumnWidth,
 } from "../../lib/layout";
 import type { ThreadListFilters } from "../../persistence/mobile-preferences";
 import { appAtomRegistry } from "../../state/atom-registry";
@@ -228,6 +229,11 @@ function AdaptiveWorkspaceLayoutContent(
   const navigation = useNavigation();
   const [primarySidebarPreferredVisible, setPrimarySidebarPreferredVisible] = useState(true);
   const [fileInspectorPreferredVisible, setFileInspectorPreferredVisible] = useState(true);
+  const [nativeInspectorWidthFraction, setNativeInspectorWidthFraction] = useState(0.4);
+  const nativeInspectorWidth = nativeInspectorColumnWidth(
+    viewportWidth,
+    nativeInspectorWidthFraction,
+  );
   const [fileInspectorPreferredWidth, setFileInspectorPreferredWidth] = useState<number | null>(
     null,
   );
@@ -376,8 +382,10 @@ function AdaptiveWorkspaceLayoutContent(
         auxiliaryPanePreferredVisible:
           !workspacePage && inspectorActive && fileInspectorPreferredVisible,
         auxiliaryPanePreferredWidth: fileInspectorPreferredWidth ?? undefined,
+        nativeInspectorWidth,
       }),
     [
+      nativeInspectorWidth,
       fileInspectorPreferredVisible,
       fileInspectorPreferredWidth,
       inspectorActive,
@@ -805,6 +813,11 @@ function AdaptiveWorkspaceLayoutContent(
     setPrimarySidebarVisible,
     openWorkspaceTab,
     setAuxiliaryPaneWidth: setFileInspectorPreferredWidth,
+    nativeInspectorWidth,
+    setNativeInspectorWidth: (width: number) =>
+      setNativeInspectorWidthFraction(
+        nativeInspectorColumnWidth(viewportWidth, width / viewportWidth) / viewportWidth,
+      ),
     composerKeyboardActive,
     setComposerEditing,
     sidebarByOrientation,

apps/mobile/src/features/layout/adaptive-workspace-context.ts

@@ -45,6 +45,8 @@ interface AdaptiveWorkspaceContextValue {
     options?: { readonly columns?: boolean },
   ) => void;
   readonly setAuxiliaryPaneWidth: (width: number) => void;
+  readonly nativeInspectorWidth: number;
+  readonly setNativeInspectorWidth: (width: number) => void;
   /**
    * Android split view while the thread composer has the soft keyboard: the
    * sidebar and rail step aside and the thread header drops to one line.
@@ -86,6 +88,8 @@ export const AdaptiveWorkspaceContext = createContext<AdaptiveWorkspaceContextVa
   setPrimarySidebarVisible: () => undefined,
   openWorkspaceTab: () => undefined,
   setAuxiliaryPaneWidth: () => undefined,
+  nativeInspectorWidth: 0,
+  setNativeInspectorWidth: () => undefined,
   composerKeyboardActive: false,
   sidebarByOrientation: null,
   setComposerEditing: () => undefined,

apps/mobile/src/features/layout/createWorkspaceStackNavigator.ios.tsx

@@ -20,7 +20,7 @@ import {
   type NativeStackTypeBag,
 } from "@react-navigation/native-stack";
 import { Fragment, use, useEffect, useRef, useState, type ComponentProps } from "react";
-import { StyleSheet, useWindowDimensions, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Split, type SplitHostCommands } from "react-native-screens";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -194,16 +194,11 @@ function WorkspaceColumns(
     startNewTask,
     openWorkspaceTab,
     sidebarByOrientation,
+    nativeInspectorWidth,
+    setNativeInspectorWidth,
   } = useAdaptiveWorkspaceLayout();
   const deviceType = useDeviceType();
-  const windowDimensions = useWindowDimensions();
-  const nativeMetrics = useNativeLayoutMetrics();
-  const viewportWidth = nativeMetrics?.width ?? windowDimensions.width;
-  const [inspectorWidthFraction, setInspectorWidthFraction] = useState(0.4);
-  const inspectorWidth = Math.max(
-    260,
-    Math.min(viewportWidth * 0.6, viewportWidth * inspectorWidthFraction),
-  );
+  const inspectorWidth = nativeInspectorWidth;
   const resizeStartWidth = useRef(inspectorWidth);
   const settingsDetailIn = (detail: readonly Route[]) =>
     layout.usesSplitView && detail[0] && isSettingsRoute(detail[0].name) ? detail[0] : undefined;
@@ -470,13 +465,9 @@ function WorkspaceColumns(
                         onResizeStart={() => {
                           resizeStartWidth.current = inspectorWidth;
                         }}
-                        onResizeBy={(delta) => {
-                          const width = Math.max(
-                            260,
-                            Math.min(viewportWidth * 0.6, resizeStartWidth.current + delta),
-                          );
-                          setInspectorWidthFraction(width / viewportWidth);
-                        }}
+                        onResizeBy={(delta) =>
+                          setNativeInspectorWidth(resizeStartWidth.current + delta)
+                        }
                       />
                     </View>
                   </View>

apps/mobile/src/lib/layout.test.ts

@@ -7,6 +7,7 @@ import {
   deriveThreadArrangementSizing,
   deriveThreadWorkLogSizing,
   deriveWorkspacePaneLayout,
+  nativeInspectorColumnWidth,
   isPrimarySidebarPinned,
 } from "./layout";
 
@@ -153,24 +154,31 @@ describe("isPrimarySidebarPinned", () => {
 });
 
 describe("deriveWorkspacePaneLayout", () => {
-  it("lets UIKit keep the sidebar independent of the inspector in landscape", () => {
-    const layout = deriveLayout({ width: 1_194, height: 834 });
-    for (const primarySidebarPreferredVisible of [true, false]) {
-      expect(
-        deriveWorkspacePaneLayout({
-          layout,
-          viewportWidth: 1_194,
-          nativeWorkspace: true,
-          primarySidebarPreferredVisible,
-          auxiliaryPanePreferredVisible: true,
-        }),
-      ).toMatchObject({
-        primarySidebarVisible: primarySidebarPreferredVisible,
-        primarySidebarSuppressedByAuxiliary: false,
-        auxiliaryPaneVisible: true,
-      });
-    }
-  });
+  it.each([
+    { width: 1_194, height: 834, suppressed: false },
+    { width: 1_032, height: 1_376, suppressed: true },
+  ])(
+    "steps the sidebar aside for the native inspector only when the page gets too narrow ($width wide)",
+    ({ width, height, suppressed }) => {
+      const layout = deriveLayout({ width, height });
+      for (const primarySidebarPreferredVisible of [true, false]) {
+        expect(
+          deriveWorkspacePaneLayout({
+            layout,
+            viewportWidth: width,
+            nativeWorkspace: true,
+            primarySidebarPreferredVisible,
+            auxiliaryPanePreferredVisible: true,
+            nativeInspectorWidth: nativeInspectorColumnWidth(width, 0.4),
+          }),
+        ).toMatchObject({
+          primarySidebarVisible: primarySidebarPreferredVisible && !suppressed,
+          primarySidebarSuppressedByAuxiliary: primarySidebarPreferredVisible && suppressed,
+          auxiliaryPaneVisible: true,
+        });
+      }
+    },
+  );
 
   it("keeps an explicitly hidden thread sidebar hidden when the file inspector is visible", () => {
     const layout = deriveLayout({ width: 1_024, height: 1_366 });

apps/mobile/src/lib/layout.ts

@@ -58,6 +58,9 @@ const AUXILIARY_PANE_MAX_WIDTH = 480;
 const AUXILIARY_PANE_DEFAULT_MAX_WIDTH = 320;
 const FILE_INSPECTOR_MIN_VIEWPORT_WIDTH = 820;
 const FILE_INSPECTOR_MIN_MAIN_WIDTH = 560;
+// UIKit's inspector column keeps its own width, so the sidebar steps aside only when the page
+// would get narrower than this: landscape 11" and 13" iPads keep three columns, portrait ones don't.
+const NATIVE_INSPECTOR_MIN_MAIN_WIDTH = 320;
 
 /**
  * The window's width class. Compact: the sidebar is the root and pages push over it. Medium: the
@@ -221,6 +224,8 @@ export function deriveWorkspacePaneLayout(input: {
   readonly primarySidebarPreferredVisible: boolean;
   readonly auxiliaryPanePreferredVisible: boolean;
   readonly auxiliaryPanePreferredWidth?: number;
+  /** The native inspector column's width; UIKit lays it out, not this layout. */
+  readonly nativeInspectorWidth?: number;
 }): WorkspacePaneLayout {
   const viewportWidth = Math.max(0, input.viewportWidth);
   const floats = input.primarySidebarFloats ?? input.layout.variant === "medium";
@@ -237,18 +242,17 @@ export function deriveWorkspacePaneLayout(input: {
     reservedLeadingWidth: preferredPrimarySidebarWidth,
   });
   const auxiliaryPaneVisible = fileInspector.supported && input.auxiliaryPanePreferredVisible;
+  const inspectorWidth = input.nativeWorkspace
+    ? (input.nativeInspectorWidth ?? null)
+    : fileInspector.width;
   const primarySidebarSuppressedByAuxiliary =
-    !input.nativeWorkspace &&
     preferredPrimarySidebarVisible &&
     !floats &&
     auxiliaryPaneVisible &&
-    fileInspector.width !== null &&
+    inspectorWidth !== null &&
     input.layout.listPaneWidth !== null &&
-    viewportWidth -
-      input.layout.listPaneWidth -
-      (input.layout.listPaneGap ?? 0) -
-      fileInspector.width <
-      FILE_INSPECTOR_MIN_MAIN_WIDTH;
+    viewportWidth - input.layout.listPaneWidth - (input.layout.listPaneGap ?? 0) - inspectorWidth <
+      (input.nativeWorkspace ? NATIVE_INSPECTOR_MIN_MAIN_WIDTH : FILE_INSPECTOR_MIN_MAIN_WIDTH);
   const primarySidebarVisible =
     preferredPrimarySidebarVisible && !primarySidebarSuppressedByAuxiliary;
   const primarySidebarWidth = primarySidebarVisible ? preferredPrimarySidebarWidth : 0;
@@ -264,6 +268,10 @@ export function deriveWorkspacePaneLayout(input: {
   };
 }
 
+export function nativeInspectorColumnWidth(viewportWidth: number, fraction: number) {
+  return Math.max(260, Math.min(viewportWidth * 0.6, viewportWidth * fraction));
+}
+
 export function deriveFileInspectorPaneLayout(input: {
   readonly layout: Layout;
   readonly viewportWidth: number;