[Bug]: Side-by-side diff squeezes the "N unmodified lines" divider into the line-number column #17157

Activity

1. juliusmarminge commented on Oct 8, 2026

   

   juliusmarminge

   on Oct 8, 2026

   Member

   More actions

   Note

   Grok responding on behalf of Julius.

   Thanks for the report, @saibotma. The cause looks like our own CSS override, not the diff library.

   What's going on

   • @pierre/diffs draws the hunk separator inside the line-number gutter. The label wrapper is position: absolute; inset-inline: 0, so by default it's only as wide as the gutter (createSeparator.js, pushSeparator in DiffHunksRenderer.js ~L1148).
   • In unified mode, Pierre widens that wrapper with [data-unified] [data-separator=line-info] [data-separator-wrapper] { width: 100cqi }, so it spans the whole row. That rule doesn't exist for split mode. On the deletions side, the stock CSS lets the label overflow the gutter instead.
   • Our override in apps/web/src/components/diffs/StyledDiffCodeView.tsx assumes the wrapper is always full width:
     • L149–157 set grid-template-columns: 0 minmax(0, 1fr) with the content in column 2. That clamps the label to the gutter width, and Pierre's overflow: clip on [data-separator-content] cuts it to "2 u".
     • The divider lines are ::before/::after flex children of [data-unmodified-lines] (L124–147), so they get no space either.
     • L101–111 make the separator row and wrapper backgrounds --code-background/transparent. That hides the bar Pierre would otherwise paint on the additions side, so the rest of the row ends up blank.
   • This override seems to date back to the diff restyle in fix(web): better right panel (new diffs styling) #5260 (August), so it doesn't look like a regression from the recent @pierre/diffs 1.5.2 bump (chore(deps): upgrade @pierre/diffs to 1.5.2 and @pierre/trees to beta.6 #16644). Pierre's separator CSS is essentially the same in 1.3.0-beta.10 and 1.5.2.

   Reproduction

   I rendered Pierre 1.5.2's output together with our DIFF_VIEW_UNSAFE_CSS in headless Chrome, outside the app. Split mode showed the same clipped "9 u" label in the gutter with nothing across the rest of the row. Unified mode looked correct. I haven't checked this in the desktop app itself.

   Suggested fix (in StyledDiffCodeView.tsx)

   Add split-mode rules next to the existing separator block, for example:

   @supports (width: 1cqi) {
     [data-deletions] [data-gutter]
       :is([data-separator="line-info"], [data-separator="line-info-basic"])
       [data-separator-wrapper] {
       width: 100cqi !important; /* span the deletions column, like Pierre's unified rule */
     }
     [data-additions] [data-gutter] [data-separator="line-info"] [data-separator-wrapper] {
       display: flex !important;
       align-items: center;
       padding-inline: 12px !important;
     }
     [data-additions] [data-gutter] [data-separator="line-info"] [data-separator-wrapper]::before {
       content: "";
       flex: 1 1 auto;
       height: 1px;
       background-color: color-mix(in srgb, var(--code-background) 92%, var(--code-foreground));
     }
   }

   In the same static render, this gives a centered "N unmodified lines" label with the divider across the left column and a matching line on the right.

   Caveats:

   • With word wrap on, Pierre lays split diffs out with [data-code] { display: contents }, so there's no per-column container and 100cqi would resolve against the viewport. Wrap mode probably needs a separate rule, for example styling the separator cell in [data-content] instead.
   • I haven't checked that hover styling and click-to-expand still behave the same.

   Related: #17156 (GitLab "expand unmodified lines" does nothing) is in the same area but is a separate bug.
2. juliusmarminge

   added

   bugSomething is broken or behaving incorrectly.Something is broken or behaving incorrectly.

   via-triageFiled through npx t3 triageFiled through npx t3 triage

   on Oct 8, 2026