diff --git a/packages/app/src/components/code-insets.ts b/packages/app/src/components/code-insets.ts index faab5e743..fb2e17a4d 100644 --- a/packages/app/src/components/code-insets.ts +++ b/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" diff --git a/packages/app/src/components/file-pane.tsx b/packages/app/src/components/file-pane.tsx index d16196a02..7f475a5a5 100644 --- a/packages/app/src/components/file-pane.tsx +++ b/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 Math.max(digits * 8 + 12, 28); + return lineNumberGutterWidth(highlightedLines.length); }, [highlightedLines]); const handlePreviewScroll = useCallback( diff --git a/packages/app/src/components/git-diff-pane.tsx b/packages/app/src/components/git-diff-pane.tsx index c97ac2bb5..04efd162b 100644 --- a/packages/app/src/components/git-diff-pane.tsx +++ b/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 = digitCount * 8 + 12; + const gutterWidth = lineNumberGutterWidth(maxLineNo); 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