# Files changed · PR \#23152 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/23152/diffs)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

[fix\(mobile\): the iPhone Duo's inspector panes use the full column](https://git.cafe/pingdotgg/t3code/pull/23152.md)

Version: 8

Head commit: 16b5b60a8a53d635e4f213c649cdd5e035e82073

Base commit: c3dafcf5e44aeed80a764720b7ab077530613c9b

Comparison base: c3dafcf5e44aeed80a764720b7ab077530613c9b

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## apps/mobile/src/features/files/thread-file-navigator-pane.tsx

Status: modified; +2; −1

```diff
@@ -21,6 +21,7 @@
 import { useEnvironmentPresentation } from "../../state/presentation";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { FileTreeBrowser } from "./FileTreeBrowser";
+import { NativeInspectorContent } from "../../native/NativeInspectorContent";
 import { useFileTreeEntries } from "./useFileTreeEntries";
 import { preloadWorkspaceFileContents } from "./preload-workspace-file";
 import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
@@ -120,7 +121,7 @@
             scrollEdgeEffects={headerScrollEdgeEffects}
             style={{ backgroundColor: sheetColor, flex: 1 }}
           >
+            <NativeInspectorContent>{fileTree}</NativeInspectorContent>
-            {fileTree}
             <ScreenStackHeaderConfig
               backgroundColor="rgba(0,0,0,0)"
               color={foregroundColor}
```

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

Status: modified; +3; −1

```diff
@@ -305,7 +305,9 @@
       </Split.Column>
       <Split.Inspector>
         <Split.HeaderConfig hidden />
-        <ColumnContent>
+        {/* Inspector panes host their own native stacks, which UIKit insets for the Duo's
+            vertical bar wherever they sit, so each pane insets its own content instead. */}
+        <ColumnContent insetHorizontally={false}>
           <View className="flex-1 bg-screen">{inspector.render?.()}</View>
         </ColumnContent>
       </Split.Inspector>
```

## apps/mobile/src/features/review/ReviewSheet.tsx

Status: modified; +4; −12

```diff
@@ -30,6 +30,7 @@
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNativeColumnLayoutMetrics } from "../../native/native-layout-metrics";
+import { NativeInspectorContent } from "../../native/NativeInspectorContent";
 
 import { AppText as Text } from "../../components/ui/AppText";
 import { SymbolView } from "../../components/ui/AppSymbol";
@@ -40,7 +41,6 @@
 import { useEnvironmentPresentation } from "../../state/presentation";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { useUniwindTheme } from "../../lib/useUniwindTheme";
-import { IOS_NAV_BAR_HEIGHT } from "../../lib/layoutMetrics";
 import { useThreadDraftForThread } from "../../state/use-thread-composer-state";
 import { EnvironmentConnectionNotice } from "../connection/EnvironmentConnectionNotice";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
@@ -307,7 +307,6 @@
   onSelectFile,
   ref,
 }: ReviewFileNavigatorProps) {
-  const insets = useSafeAreaInsets();
   const theme = useUniwindTheme();
   const sheetColor = theme["--color-sheet"];
   const foregroundColor = theme["--color-foreground"];
@@ -359,15 +358,8 @@
       data={files}
       extraData={selectedFileId}
       keyExtractor={(file) => file.id}
-      contentContainerStyle={{
-        paddingHorizontal: 8,
-        paddingBottom: 8,
-
-        paddingTop: Platform.OS === "ios" ? insets.top + IOS_NAV_BAR_HEIGHT + 8 : 8,
-      }}
-      scrollIndicatorInsets={
-        Platform.OS === "ios" ? { top: insets.top + IOS_NAV_BAR_HEIGHT } : undefined
-      }
+      contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : "never"}
+      contentContainerStyle={{ paddingHorizontal: 8, paddingVertical: 8 }}
       renderItem={renderFile}
     />
   );
@@ -384,7 +376,7 @@
             scrollEdgeEffects={headerScrollEdgeEffects}
             style={{ backgroundColor: sheetColor, flex: 1 }}
           >
-            {fileList}
+            <NativeInspectorContent>{fileList}</NativeInspectorContent>
             <ScreenStackHeaderConfig
               backgroundColor="rgba(0,0,0,0)"
               color={foregroundColor}
```

## apps/mobile/src/features/threads/git/GitOverviewSheet.tsx

Status: modified; +2; −2

```diff
@@ -20,7 +20,7 @@
 
 import { ScreenStack } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { NativeSheetContent } from "../../../native/NativeSheetContent";
+import { NativeInspectorContent } from "../../../native/NativeInspectorContent";
 import { NativeHeader, NativeScreen } from "../../../native/ThemedScreenStack";
 import {
   AndroidHeaderIconButton,
@@ -349,7 +349,7 @@
             scrollEdgeEffects={HEADER_SCROLL_EDGE_EFFECTS}
             className="flex-1 bg-sheet"
           >
-            <NativeSheetContent>{content}</NativeSheetContent>
+            <NativeInspectorContent>{content}</NativeInspectorContent>
             <NativeHeader
               backgroundColor="rgba(0,0,0,0)"
               tintColorClassName="accent-foreground"
```

## apps/mobile/src/features/threads/thread-inspector-content-stack.tsx

Status: modified; +4; −1

```diff
@@ -2,6 +2,7 @@
 import { View } from "react-native";
 
 import { RenderErrorBoundary, RenderFailureView } from "../../components/RenderErrorBoundary";
+import { NativeInspectorContent } from "../../native/NativeInspectorContent";
 
 export type ThreadInspectorMode = "route" | "git" | "files";
 
@@ -33,7 +34,9 @@
       <RenderErrorBoundary
         resetKeys={props.resetKeys}
         renderFallback={(fallback) => (
+          <NativeInspectorContent>
+            <RenderFailureView {...fallback} title="The inspector couldn't be displayed" />
-          <RenderFailureView {...fallback} title="The inspector couldn't be displayed" />
+          </NativeInspectorContent>
         )}
       >
         {props.children}
```

## apps/mobile/src/native/NativeInspectorContent.tsx

Status: added; +17; −0

```diff
@@ -1,0 +1,17 @@
+import type { ReactNode } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { useNativeWorkspaceColumnsSupported } from "./NativeWorkspaceColumns";
+
+// Pads with the inspector column's insets, which the column leaves to its panes so their
+// native headers lay out against the vertical bar themselves.
+export function NativeInspectorContent(props: { readonly children: ReactNode }) {
+  const usesNativeWorkspaceColumns = useNativeWorkspaceColumnsSupported();
+  if (!usesNativeWorkspaceColumns) return <>{props.children}</>;
+
+  return (
+    <SafeAreaView edges={["left", "right"]} style={{ flex: 1 }}>
+      {props.children}
+    </SafeAreaView>
+  );
+}
```

## apps/mobile/src/native/NativeSheetContent.tsx

Status: deleted; +0; −17

```diff
@@ -1,17 +1,0 @@
-import type { ReactNode } from "react";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
-
-import { useNativeWorkspaceColumnsSupported } from "./NativeWorkspaceColumns";
-
-export function NativeSheetContent(props: { readonly children: ReactNode }) {
-  const usesNativeWorkspaceColumns = useNativeWorkspaceColumnsSupported();
-  if (!usesNativeWorkspaceColumns) return <>{props.children}</>;
-
-  return (
-    <SafeAreaProvider style={{ flex: 1 }}>
-      <SafeAreaView edges={["left", "right"]} style={{ flex: 1 }}>
-        {props.children}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-}
```