Open
Conversation
Enable a first-pass compact unified gutter experiment for the Git Changes right-panel viewer while keeping the rest of the Monaco diff surfaces unchanged. The change is intentionally narrow: Git Changes opts into a compact unified Monaco configuration, but no CSS seam-hiding layer or new settings contract is introduced yet. This snapshot exists as a clean checkpoint from the redesign branch base so the next visual iteration can stay deliberate and easy to evaluate. If the compact shape proves acceptable, future work can layer on only the smallest additional adjustments needed for sign placement or classic-mode widening without carrying forward the earlier broad gutter override experiments.
Introduce a second unified gutter presentation mode for the Git Changes Monaco diff viewer on top of the compact checkpoint. Compact remains the narrow single-column-style inline presentation, while classic restores Monaco's wider unified gutter shape with the extra visible line-number lane that better matches the intended classic model. This stays intentionally local to Git Changes and does not yet promote the choice into shared settings or toolbar contracts. The goal of the snapshot is to preserve the now-validated visual distinction between compact and classic before any further cleanup or productization work changes the control surface.
Refine the compact Git Changes Monaco unified gutter by explicitly left-aligning the line numbers and setting their left inset to 4px. This preserves the current compact/classic gutter model while correcting the remaining visual slack in compact mode that made the numbers feel too detached from the gutter edge. The change stays narrowly scoped to the compact unified Git Changes presentation: a small host data attribute marks the compact mode, and a matching right-panel CSS rule applies the 4px inset without changing classic mode or the underlying Monaco width configuration.
Apply the same left-edge tightening used in compact mode to the classic Git Changes Monaco unified gutter. Classic intentionally remains the wider Monaco-style unified presentation, but the first line-number column no longer wastes horizontal space with the default right-aligned slack on its left side. This snapshot keeps the change narrowly scoped to presentation only. The wider classic gutter model is preserved, while a small host data attribute plus matching scoped CSS realigns the visible number column to a 4px left inset so the gutter width is spent on useful content instead of empty margin.
Replace the earlier compact/classic gutter experiment wiring with a cleaner shared model and make the unified gutter widths truly respond to the diff's line-number scale. The previous implementation had the right intent, but it still behaved too statically in common cases and it forced classic mode's two visible number columns to share the same width budget, which wasted space when one side contained much shorter line numbers than the other. This snapshot consolidates gutter style selection into a single unifiedGutterStyle prop, keeps the Monaco-specific sizing logic inside monaco-diff-viewer.tsx, and introduces a shared helper that derives line-number budgets from the actual before/after line counts. Compact mode keeps a shared single-column-style width, while classic mode now sizes the original and modified number columns independently and expands the sign/decorations lane more aggressively as digit counts grow. The existing 4px left inset remains a presentation-only CSS rule keyed off the same unified gutter style attribute. The result is a cleaner ownership model and a more accurate classic gutter layout: small files stay tight, three-digit and four-digit ranges get additional room, and classic no longer makes both numeric columns equally wide when only one side needs the extra width. This commit serves as the architectural checkpoint before any further polish to edge cases such as sign-spacing behavior at larger digit counts or future productization of the compact/classic choice into a broader settings surface.
Persist the Git Changes compact/classic unified gutter selection through the existing UI preferences store instead of keeping it in local component state. The previous redesign iterations proved out the Monaco gutter behavior, but the selected mode still reset to compact on reload because GitChangesTab owned the choice with a local signal rather than reading and writing a persisted preference. This snapshot adds a dedicated gitDiffUnifiedGutterStyle preference with compact as the default and normalizes stored values defensively. RightPanel now threads the persisted value and setter into GitChangesTab, and GitChangesTab no longer owns a competing local state copy. That makes preferences the single source of truth for the unified gutter style while keeping the control surface narrow and local to the Git Changes panel. The result is a cleaner ownership model and the expected product behavior: switching between compact and classic survives reloads, remounts, and future UI refactors that might recreate the tab component. This commit intentionally does not broaden the settings UI again; it only secures persistence for the mode that the redesign branch has already validated visually.
Replace the remaining hardcoded user-facing strings in the Git Changes compact/classic gutter toggle with i18n-backed messages. The gutter redesign branch had already validated the Monaco behavior and persistence, but the toggle itself still rendered English-only labels and titles directly in GitChangesTab, which violated the repository rule that user-visible strings must go through the shared localization layer. This follow-up keeps the scope intentionally narrow. It adds only the four new gutter-toggle keys under the existing instanceShell.diff namespace in the locale instance.ts files and switches the button label, title, and aria-label lookups over to props.t(...). No broader locale-file cleanup or settings copy refactor is included in this branch. The result is that the compact/classic gutter control now meets the codebase's i18n expectations without changing any of the underlying Monaco behavior, persistence model, or product surface validated in the earlier redesign checkpoints.
Extend the Git Changes Monaco gutter redesign into split view so the split editor no longer falls back to the earlier static-width assumptions. The previous work focused on unified mode and then proved out dynamic gutter sizing, persistence, and localization, but split mode still showed the same class of layout problems: wasted left inset on the original pane and overlap or over-allocation around the modified pane's line-number and sign lanes as digit counts grew. This snapshot introduces a dedicated split-mode sizing path in monaco-diff-viewer.tsx while reusing the same clean, line-count-driven design principles established for unified mode. Split view now computes digit-aware budgets for the original and modified panes independently, rather than inheriting a generic static gutter width. The modified pane therefore expands when large line-number ranges require more room, and the original pane no longer needs to pay for width it does not use. The split heuristic was then tuned to be less aggressive than the unified classic heuristic on the decorations lane, because the earlier formula fixed overlap but over-expanded the right-side gutter for four- and five-digit files. By reducing the growth rate for split-mode lineDecorationsWidth while preserving dynamic per-side number widths, the gutter stays readable without leaving conspicuous dead space. A small split-only CSS adjustment also aligns both split panes to the same 4px left inset used elsewhere, removing the wasted padding before the line numbers in the original pane. This commit captures the split-view checkpoint of the redesign: unified and split modes now share the same overall architectural approach, but each mode can still tune its own gutter heuristics where Monaco's layout behavior differs. It should provide a cleaner base for any final polish or future productization of the Monaco gutter behavior across the rest of the diff surfaces.
Correct the remaining wasted left inset in the split-view original pane of the Git Changes Monaco diff viewer. Earlier split-mode work fixed the large-scale dynamic sizing issues and the modified pane overlap problems, but one visual defect remained: the original pane still showed an empty strip before the first visible line-number column even when the line numbers were only a single digit wide. The DOM for the original split pane showed that this inset was not caused by the shared 4px line-number padding rule or by the dynamic number-width heuristic. Monaco was still reserving an empty glyph-margin lane of 18px on the original side, and the line numbers themselves were positioned at left: 18px inside a 42px margin block. That meant the visible number column was shifted inward before any of our line-number styling could apply. This commit fixes that specific structural inset without touching the broader gutter-width heuristics again. It collapses the empty original-side glyph margin, realigns the original line numbers and delete sign to the same left-edge layout pattern used by the modified pane, shrinks the original pane margin wrappers accordingly, and shifts the original scrollable content left to match the corrected margin width. The change is intentionally scoped to split mode and the original pane only, because the modified pane did not exhibit the same empty leading lane. This snapshot captures the narrow DOM-rooted correction that was needed after the dynamic split sizing work. It keeps the earlier line-count-driven sizing model intact while removing the leftover Monaco structural offset that had still made the original split gutter feel wasteful and visually inconsistent.
Move the Git Changes compact/classic Monaco gutter control out of the in-panel diff toolbar and into the Appearance settings section, where it fits better as a persisted presentation preference. The previous toolbar button was useful while iterating on the redesign, but once the gutter behavior stabilized it became clear that the choice belongs with other appearance and diff defaults rather than inside the Git Changes panel itself. This commit removes the local GitChangesTab toggle button entirely and reuses the already-persisted gitDiffUnifiedGutterStyle preference as the source of truth for a new settings row in Appearance. The selector is wired through the existing settings UI patterns and presents the two user-facing modes as Compact and Normal, matching the desired naming more closely than the earlier Compact and Classic terminology shown directly in the panel. The implementation intentionally focuses on the UI relocation rather than changing any of the underlying Monaco behavior. Unified and split gutter sizing, persistence, and the existing Monaco presentation heuristics stay exactly as they were. Only the control surface changes: users now choose the mode in Settings, and Git Changes simply consumes the persisted preference. This snapshot is also intentionally narrow in localization scope. It adds the new settings-row copy in English so the relocation can be reviewed, but the remaining locale settings files still need the same small follow-up translation pass before this should be considered fully complete for multilingual users. The branch already established the i18n pattern for the earlier toolbar labels; this commit captures the product-level move of the control itself.
Collaborator
Your PR
##Dev 
" />
Second gutter is missing. Can't see the lines |
Contributor
Author
|
@shantur You have "wrap lines" enabled, thus you can't see the lines numbers in some places (they appear "missing"), but they are as they should be. As far as I understand, you saw wrapped inline/unified Monaco output and interpreted the absence of repeated numbers on wrapped visual rows as a missing “second gutter”. Here is split mode:
Below is unified mode:
How it looks like in VScode (inline mode): 
I do not see - what is the issue? Keep in mind - in the demonstration images I have wrap line disabled for clarity. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #303.
This PR redesigns the Git Changes Monaco diff gutter so unified and split view both use a more intentional, space-efficient Monaco presentation while preserving Monaco's performance on large diffs.
The final behavior includes:
CompactandNormalgutter modes for Git ChangesVisual comparison
Unified view before
Unified view after
Split view before
Split view after
What changed
Unified view
CompactNormalSplit view
+lanePersistence and UI
CompactandNormali18n
Implementation notes
packages/ui/src/components/file-viewer/monaco-diff-viewer.tsxReview focus
Compactmode should feel tight without clipping or overlapNormalmode should remain wider and readable+lane as digit counts grow