[Ladislau Szomoru (lszomoru)]

Fixes #235620

Repro steps

1. Create a git repository with two commits.
2. On the latest commit, create a branch and a tag with ~120 character names, e.g. git branch feature/a-very-long-branch-name-that-keeps-going-and-going-to-check-how-the-scm-graph-hover-handles-long-refs and git tag release/2026.11.14-a-very-long-tag-name-that-also-keeps-going-to-check-how-the-scm-graph-hover-renders-it.
3. Open the folder, open the Source Control view, and hover the latest commit in the Graph view.
4. 🐛 The long reference names wrap inside their badges: the pill-shaped badges turn into full-width, two-line rounded blocks (as in the issue screenshot).

Root cause

toHistoryItemHoverContent (scmHistory.ts) injects the references into the hover as inline <span> badges. In scm.css the references paragraph is a wrapping flex container, so each badge is a flex item that wraps its text when the name is wider than the hover. The markdown sanitizer only allows color, background, display:inline-block, and border-radius in inline styles, so the badge layout has to come from scm.css.

Fix

• scmHistory.ts/scm.css: the rendered references section is marked with a history-item-hover-references class (instead of being targeted by its position, which missed hovers without a short statistics section, e.g. empty commits). The reference badges in it stay on a single line (white-space: nowrap), are capped at the hover width (max-width: 100%), and long names end with an ellipsis (overflow: hidden; text-overflow: ellipsis). Short names render exactly as before.
• scmHistory.ts: each badge gets a title with the full reference name, so a truncated name can still be read. The name is HTML-attribute encoded, and $ is encoded as well so theme-icon rendering (which runs on the rendered HTML string) cannot rewrite $(...) sequences inside the attribute.

Validation

Command	Result
pnpm run typecheck-client	✅ passed
pnpm run oxlint src/vs/workbench/contrib/scm/browser/scmHistory.ts	✅ passed
pnpm run stylelint src/vs/workbench/contrib/scm/browser/media/scm.css	✅ passed (no errors)
node build/hygiene.ts src/vs/workbench/contrib/scm/browser/media/scm.css src/vs/workbench/contrib/scm/browser/scmHistory.ts	✅ passed
pnpm run build-fast + node test/scenario/out/runScenario.js --dev <scenario> (with fix)	✅ all 3 steps passed
Same scenario for an empty commit (hover without the short statistics section)	✅ all 3 steps passed
Same scenario with the fix reverted	❌ failed as expected: both long badges are 38px tall vs 19px for main, and no badge exposes the full name

The UI scenario (validate-ui-scenario harness, Code OSS dev build, throwaway profile, scratch repo with a main branch plus a ~120 character branch and tag on the same commit) opens the Graph, hovers the commit, and asserts on the DOM that every reference badge is a single line (same height as the main badge), fits inside the hover, and has the full reference name as its title.

Evidence

Before/after screenshots and a side-by-side recording (before on the left, after on the right, labelled) are available; they can be attached to this PR (media can't be uploaded from the CLI).

• Before: the main badge is a 19px pill, but the long branch and tag badges wrap onto two lines and become full-width 38px rounded blocks (the hover is 222px tall).
• After: all three badges are 19px single-line pills. The long branch and tag names end with an ellipsis at the hover's width, the full name shows as the badge tooltip, and the hover shrinks to 184px tall. Short names are unchanged.

[Copilot]

🟡 Changes recommended

The hover CSS relies on a four-section layout, leaving long reference names untruncated for commits without statistics; the references section needs an explicit styling marker.

1 open issue

• Target the references section explicitly for truncation · New

What changed in this PR

This PR addresses #235620 by keeping long branch and tag badges compact in VS Code’s SCM Graph history hover while preserving access to their full names.

Changes:

• Adds single-line, width-limited badge styling with ellipsis.
• Adds full-name titles, escaping HTML attributes and dollar signs to prevent theme-icon rewriting.

File	Description
src/​vs/​workbench/​contrib/​scm/​browser/​scmHistory.ts	Adds safely encoded full-reference titles to hover badges.
src/​vs/​workbench/​contrib/​scm/​browser/​media/​scm.css	Adds width limits and ellipsis styling for reference badges.

_{Review effort: Balanced}