fix(desktop): add visual gap between line number columns in inline diff

[Kitenite]

Summary

• Add dynamic calculation of lineNumbersMinChars based on file content
• Calculates the digits needed for the max line count and adds 1 for visual spacing
• Creates a gap between original and modified line number columns in inline diff view

Test plan

• Open a diff in inline view mode
• Verify there's visible spacing between the two line number columns
• Test with files of varying sizes (10 lines, 100 lines, 1000+ lines)

Summary by CodeRabbit

• New Features

  • Enhanced diff viewer with improved line number column width that automatically adjusts based on the number of lines in the file being reviewed.

• Tests

  • Added comprehensive test coverage for line number formatting calculations across various file sizes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This PR introduces a utility function getLineNumbersMinChars that dynamically computes the minimum character width required for line numbers in a Monaco diff editor based on the larger of the original and modified content's line counts. The function is integrated into DiffViewer.tsx and comprehensively tested.

Changes

Cohort / File(s)	Summary
New Utility Function and Tests apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/DiffViewer/utils/getLineNumbersMinChars.ts, getLineNumbersMinChars.test.ts, index.ts	Added getLineNumbersMinChars function that calculates minimum character width for line numbers by determining the digit length of the max line count between original and modified content. Includes comprehensive test coverage for single-line, multi-line (1–9, 10–99, 100–999, 1000+ lines), and edge cases. Re-exported from utils/index.ts.
DiffViewer Integration apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/DiffViewer/DiffViewer.tsx	Imported getLineNumbersMinChars and passed its computed value as the lineNumbersMinChars option to the Monaco DIFF editor, enabling dynamic line-number width calculation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat(desktop): improve side-by-side diff view UI and fix content reset #836 — Modifies DiffViewer.tsx editor options wiring for Monaco diff editor
• fix(desktop): reduce diff viewer gutter width #861 — Sets Monaco diff editor's lineNumbersMinChars setting (complements this dynamic approach)
• feat(desktop): add editable Monaco diff view for uncommitted changes #387 — Modifies DiffViewer.tsx to change Monaco editor options and configuration

Poem

🐰 Counting lines with care so neat,
Line numbers get a perfect fit,
Monaco now knows just the width,
No truncation, no excess—a match!

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ⚠️ Neon database branch
• ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉