refactor: improve scroll view and diff pane layout handling

packages/app/src/components/file-explorer-pane.tsx

@@ -11,11 +11,12 @@ import {
   NativeSyntheticEvent,
   Modal,
   Pressable,
-  ScrollView,
+  ScrollView as RNScrollView,
   Text,
   View,
   useWindowDimensions,
 } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { Fonts } from "@/constants/theme";
 import * as Clipboard from "expo-clipboard";
@@ -737,16 +738,16 @@ export function FileExplorerPane({
                   <Text style={styles.emptyText}>No preview available yet</Text>
                 </View>
               ) : preview.kind === "text" ? (
-                <ScrollView
+                <RNScrollView
                   style={styles.sheetContent}
                   contentContainerStyle={styles.sheetScrollContent}
                 >
-                  <ScrollView horizontal nestedScrollEnabled showsHorizontalScrollIndicator>
+                  <RNScrollView horizontal nestedScrollEnabled showsHorizontalScrollIndicator>
                     <Text style={styles.codeText}>{preview.content}</Text>
-                  </ScrollView>
+                  </RNScrollView>
-                </ScrollView>
+                </RNScrollView>
               ) : preview.kind === "image" && preview.content ? (
-                <ScrollView contentContainerStyle={styles.sheetImageScrollContent}>
+                <RNScrollView contentContainerStyle={styles.sheetImageScrollContent}>
                   <RNImage
                     source={{
                       uri: `data:${preview.mimeType ?? "image/png"};base64,${preview.content}`,
@@ -754,7 +755,7 @@ export function FileExplorerPane({
                     style={styles.sheetImage}
                     resizeMode="contain"
                   />
-                </ScrollView>
+                </RNScrollView>
               ) : (
                 <View style={styles.sheetCenterState}>
                   <Text style={styles.emptyText}>Binary preview unavailable</Text>

packages/app/src/components/git-diff-pane.tsx

@@ -390,13 +390,11 @@ const DiffFileSection = memo(function DiffFileSection({
               color={theme.colors.foregroundMuted}
             />
           </View>
-          <Text style={styles.filePath} numberOfLines={1} ellipsizeMode="head">
+          <Text style={styles.fileName}>{file.path.split("/").pop()}</Text>
-            <Text style={styles.fileName}>{file.path.split("/").pop()}</Text>
+          <Text style={styles.fileDir} numberOfLines={1}>
-            <Text style={styles.fileDir}>
+            {file.path.includes("/")
-              {file.path.includes("/")
+              ? ` ${file.path.slice(0, file.path.lastIndexOf("/"))}`
-                ? ` ${file.path.slice(0, file.path.lastIndexOf("/"))}`
+              : ""}
-                : ""}
-            </Text>
           </Text>
           {file.isNew && (
             <View style={styles.newBadge}>
@@ -1160,21 +1158,23 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
       {isGit && (hasUncommittedChanges || aheadCount > 0) ? (
         <View style={styles.diffStatusContainer}>
           <Pressable
-            style={({ hovered }) => [
+            style={({ hovered, pressed }) => [
               styles.diffStatusRow,
-              hovered && styles.diffStatusRowHovered,
+              (hovered || pressed) && styles.diffStatusRowHovered,
             ]}
             testID="changes-diff-status"
             onPress={() => setDiffModeOverride(diffMode === "uncommitted" ? "base" : "uncommitted")}
           >
-            {({ hovered }) => (
+            {({ hovered, pressed }) => (
               <>
                 <Text style={styles.diffStatusText}>
                   {diffMode === "uncommitted" ? "Uncommitted" : "Committed"}
                 </Text>
-                {hovered ? (
+                <ArrowLeftRight
-                  <ArrowLeftRight size={12} color={theme.colors.foregroundMuted} />
+                  size={12}
-                ) : null}
+                  color={theme.colors.foregroundMuted}
+                  style={hovered || pressed ? undefined : styles.diffStatusIconHidden}
+                />
               </>
             )}
           </Pressable>
@@ -1234,9 +1234,10 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     alignSelf: "flex-start",
     gap: theme.spacing[1],
-    marginHorizontal: theme.spacing[3],
+    // Align text with chevron/branch icons (at spacing[2] from edge)
     marginVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[2],
+    paddingLeft: theme.spacing[2],
+    paddingRight: theme.spacing[2],
     paddingVertical: theme.spacing[1],
     borderRadius: theme.borderRadius.base,
   },
@@ -1247,6 +1248,9 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
   },
+  diffStatusIconHidden: {
+    opacity: 0,
+  },
   splitButton: {
     flexDirection: "row",
     alignItems: "stretch",
@@ -1429,18 +1433,17 @@ const styles = StyleSheet.create((theme) => ({
   chevronExpanded: {
     transform: [{ rotate: "90deg" }],
   },
-  filePath: {
+  fileName: {
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.normal,
     color: theme.colors.foreground,
-    flex: 1,
+    flexShrink: 0,
-  },
-  fileName: {
-    color: theme.colors.foreground,
   },
   fileDir: {
-    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.normal,
+    color: theme.colors.foregroundMuted,
+    flex: 1,
   },
   newBadge: {
     backgroundColor: "rgba(46, 160, 67, 0.2)",