Extract line number gutter width calculation and improve text selection

packages/app/src/components/code-insets.ts

@@ -1,3 +1,12 @@
+/**
+ * Compute the pixel width for a line-number gutter based on the highest
+ * line number that will be displayed. Minimum width accommodates 2 digits.
+ */
+export function lineNumberGutterWidth(maxLineNumber: number): number {
+  const digits = Math.max(2, String(maxLineNumber).length);
+  return digits * 8 + 12;
+}
+
 export function getCodeInsets(theme: any) {
   const padding =
     typeof theme.spacing?.[3] === "number"

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

@@ -25,6 +25,7 @@ import {
   type HighlightToken,
   type HighlightStyle,
 } from "@getpaseo/highlight";
+import { lineNumberGutterWidth } from "@/components/code-insets";
 
 interface CodeLineProps {
   tokens: HighlightToken[];
@@ -100,6 +101,7 @@ const codeLineStyles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
     lineHeight: theme.fontSize.sm * 1.45,
     opacity: 0.4,
+    userSelect: "none",
   },
   lineText: {
     fontFamily: Fonts.mono,
@@ -135,8 +137,7 @@ function FilePreviewBody({
 
   const gutterWidth = useMemo(() => {
     if (!highlightedLines) return 0;
-    const digits = String(highlightedLines.length).length;
+    return lineNumberGutterWidth(highlightedLines.length);
-    return Math.max(digits * 8 + 12, 28);
   }, [highlightedLines]);
 
   const handlePreviewScroll = useCallback(

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

@@ -64,6 +64,7 @@ import {
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { GitHubIcon } from "@/components/icons/github-icon";
 import { buildGitActions, type GitActions } from "@/components/git-actions-policy";
+import { lineNumberGutterWidth } from "@/components/code-insets";
 import {
   WebDesktopScrollbarOverlay,
   useWebDesktopScrollbarMetrics,
@@ -325,8 +326,7 @@ function DiffFileBody({
               hunk.newStart + hunk.newCount,
             );
           }
-          const digitCount = Math.max(1, String(maxLineNo).length);
+          const gutterWidth = lineNumberGutterWidth(maxLineNo);
-          const gutterWidth = digitCount * 8 + 12;
           return file.hunks.map((hunk, hunkIndex) => {
             let oldLineNo = hunk.oldStart;
             let newLineNo = hunk.newStart;
@@ -1427,6 +1427,7 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     fontFamily: Fonts.mono,
     color: theme.colors.foregroundMuted,
+    userSelect: "none",
   },
   addLineNumberText: {
     color: theme.colors.palette.green[400],
@@ -1441,6 +1442,7 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     fontFamily: Fonts.mono,
     color: theme.colors.foreground,
+    userSelect: "text",
   },
   addLineContainer: {
     backgroundColor: "rgba(46, 160, 67, 0.15)", // GitHub green