jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(app): size file preview gutter to fit 3-digit line numbers (#592)

Browse Source 
The gutter width formula was calibrated for the diff pane's 12px font,
so 3-digit numbers wrapped to two lines in the file preview's 14px
gutter. Parameterize on font size and add numberOfLines={1} as a guard.
This commit is contained in:
Mohamed Boudra
2026-04-28 13:28:02 +07:00
parent b23e60a8f4
commit f4fded1472
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/code-insets.ts
+6 -3
View File
@@ -2,11 +2,14 @@ import type { Theme } from "@/styles/theme";
/**
* Compute the pixel width for a line-number gutter based on the highest
* line number that will be displayed. Minimum width accommodates 2 digits.
* line number that will be displayed and the gutter font size. Minimum
* width accommodates 2 digits. The 0.62 factor approximates monospace
* digit width as a fraction of font size.
*/
export function lineNumberGutterWidth(maxLineNumber: number): number {
export function lineNumberGutterWidth(maxLineNumber: number, fontSize: number): number {
const digits = Math.max(2, String(maxLineNumber).length);
return digits * 8 + 12;
const digitWidth = Math.ceil(fontSize * 0.62);
return digits * digitWidth + 12;
}
export function getCodeInsets(theme: Theme) {