fix(mobile): widen the Duo portrait sidebar

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

@@ -178,6 +178,7 @@ function WorkspaceColumns(
   const windowDimensions = useWindowDimensions();
   const nativeMetrics = useNativeLayoutMetrics();
   const viewportWidth = nativeMetrics?.width ?? windowDimensions.width;
+  const primaryColumnWidth = layout.listPaneWidth ?? 320;
   const [inspectorWidthFraction, setInspectorWidthFraction] = useState(0.4);
   const inspectorWidth = Math.max(
     260,
@@ -354,9 +355,11 @@ function WorkspaceColumns(
         if (inspector.visible) toggleAuxiliaryPane();
       }}
       columnMetrics={{
-        minimumPrimaryColumnWidth: 280,
-        maximumPrimaryColumnWidth: Math.max(380, layout.listPaneWidth ?? 0),
-        preferredPrimaryColumnWidthOrFraction: layout.listPaneWidth ?? 320,
+        minimumPrimaryColumnWidth: layout.primarySidebarOverlaysContent ? primaryColumnWidth : 280,
+        maximumPrimaryColumnWidth: layout.primarySidebarOverlaysContent
+          ? primaryColumnWidth
+          : Math.max(380, primaryColumnWidth),
+        preferredPrimaryColumnWidthOrFraction: primaryColumnWidth,
         minimumSecondaryColumnWidth: 320,
         // UIKit can retain its automatic width despite a new preference; constrain both edges.
         minimumInspectorColumnWidth: inspectorWidth,

apps/mobile/src/features/workspace/WorkspaceSidebarTabs.ios.tsx

@@ -5,6 +5,7 @@ import { useControlTheme } from "../../components/ui/useControlTheme";
 import { useNavigationTabOrder, useHiddenNavigationTabs } from "./navigation-tabs";
 import { useWorkspaceTabs } from "./WorkspaceTabsContext";
 import { useSelectWorkspaceTab } from "./useSelectWorkspaceTab";
+import { useAdaptiveWorkspaceLayout } from "../layout/adaptive-workspace-context";
 
 const NativeSidebarTabBar = requireNativeView<
   ViewProps & {
@@ -25,6 +26,7 @@ export function WorkspaceSidebarTabs(props: {
   readonly reserveComposeSpace?: boolean;
 }) {
   const workspace = useWorkspaceTabs()!;
+  const { layout } = useAdaptiveWorkspaceLayout();
   const order = useNavigationTabOrder();
   const hidden = useHiddenNavigationTabs();
   const tabs = [...visibleNavigationTabs(order, hidden), "settings" as const];
@@ -57,6 +59,7 @@ export function WorkspaceSidebarTabs(props: {
         position: "absolute",
         bottom: 0,
         left: props.compact ? 8 : 0,
+        maxWidth: layout.primarySidebarOverlaysContent ? 280 : undefined,
         // Keep the tab icons in place when Compose disappears on other destinations.
         right:
           (props.compact ? 12 : 0) +

apps/mobile/src/lib/layout.ts

@@ -127,14 +127,21 @@ export function deriveLayout(input: {
       region.x - metrics.safeArea.left >= SPLIT_SIDEBAR_MIN_WIDTH &&
       width - region.x - region.width - metrics.safeArea.right >= 320,
   );
+  const primarySidebarOverlaysContent =
+    input.nativeWorkspace === true && metrics?.hasHinge === true && width < height;
   return {
     variant: "split",
     usesSplitView: true,
-    primarySidebarOverlaysContent:
-      input.nativeWorkspace === true && metrics?.hasHinge === true && width < height,
+    primarySidebarOverlaysContent,
     listPaneWidth:
       division?.x ??
-      clamp(Math.round(width * 0.32), SPLIT_SIDEBAR_MIN_WIDTH, SPLIT_SIDEBAR_DEFAULT_MAX_WIDTH),
+      (primarySidebarOverlaysContent
+        ? 350
+        : clamp(
+            Math.round(width * 0.32),
+            SPLIT_SIDEBAR_MIN_WIDTH,
+            SPLIT_SIDEBAR_DEFAULT_MAX_WIDTH,
+          )),
     ...(division ? { listPaneGap: division.width } : {}),
     shellPadding: 0,
   };