fix(app): polish diff toolbar toggle buttons

- Lower active button surface from surface3 to surface2 for dark mode
- Add gap between toolbar button groups
- Remove outer border from unified/split group, use per-button radius

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

@@ -1381,20 +1381,12 @@ const styles = StyleSheet.create((theme) => ({
   diffStatusButtons: {
     flexDirection: "row",
     alignItems: "center",
-    gap: {
+    gap: theme.spacing[1],
-      xs: theme.spacing[1],
-      sm: theme.spacing[1],
-      md: 0,
-    },
     flexWrap: "wrap",
   },
   toggleButtonGroup: {
     flexDirection: "row",
     alignItems: "center",
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.base,
-    overflow: "hidden",
   },
   toggleButton: {
     alignItems: "center",
@@ -1402,7 +1394,7 @@ const styles = StyleSheet.create((theme) => ({
     minWidth: {
       xs: 32,
       sm: 32,
-      md: 28,
+      md: 24,
     },
     height: {
       xs: 32,
@@ -1414,15 +1406,17 @@ const styles = StyleSheet.create((theme) => ({
       sm: theme.spacing[2],
       md: theme.spacing[1],
     },
-    backgroundColor: theme.colors.surface1,
   },
   toggleButtonGroupStart: {
-    borderRightWidth: 1,
+    borderTopLeftRadius: theme.borderRadius.base,
-    borderRightColor: theme.colors.border,
+    borderBottomLeftRadius: theme.borderRadius.base,
+  },
+  toggleButtonGroupEnd: {
+    borderTopRightRadius: theme.borderRadius.base,
+    borderBottomRightRadius: theme.borderRadius.base,
   },
-  toggleButtonGroupEnd: {},
   toggleButtonSelected: {
-    backgroundColor: theme.colors.surface3,
+    backgroundColor: theme.colors.surface2,
   },
   expandAllButton: {
     flexDirection: "row",