From 39ba201ed2fd31bcfe5008ccfca2c7bc41408a61 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Thu, 6 Aug 2026 00:11:01 -0700
Subject: [PATCH] fix(source-control): prevent long branch names from
 overlapping chip (#12842)

- `truncate` has no effect on inline boxes, so long branch names would
  overflow their flex item and run under the line-total chip
- Adding `block` display forces text truncation with ellipsis instead
- Increase gap from 1.5 to 2 so ellipsis doesn't visually merge with chip
---
 ...source-control-branch-context-row.test.tsx | 25 +++++++++++++++++++
 .../source-control-branch-context-row.tsx     | 10 +++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/right-sidebar/source-control-branch-context-row.test.tsx b/src/renderer/src/components/right-sidebar/source-control-branch-context-row.test.tsx
index 0172dab5d..963e4e00a 100644
--- a/src/renderer/src/components/right-sidebar/source-control-branch-context-row.test.tsx
+++ b/src/renderer/src/components/right-sidebar/source-control-branch-context-row.test.tsx
@@ -249,6 +249,31 @@ describe('SourceControlBranchContextRow branch line total', () => {
     expect(markup).not.toContain('<button type="button" data-testid="source-control-branch')
   })
 
+  // `truncate` clips nothing on an inline box, so an inline head identity let a
+  // long branch name overflow its flex item and run under the chip.
+  it('gives the head identity a block box so long names ellipsize instead of overlapping', () => {
+    const markup = renderToStaticMarkup(
+      <SourceControlBranchContextRow
+        summary={readySummary}
+        compareBaseRef={null}
+        headDisplay={{
+          kind: 'branch',
+          branchName: 'refactor-remove-legacy-gemini-cli-current-model-plumbing'
+        }}
+        branchLineTotal={{ added: 16, removed: 1541, mergeBase: 'base' }}
+        onChangeBaseRef={vi.fn()}
+        onRetry={vi.fn()}
+      />
+    )
+
+    const identityClasses =
+      /class="([^"]*)"[^>]*data-testid="source-control-head-identity"/.exec(markup)?.[1] ?? ''
+
+    expect(identityClasses).toContain('block')
+    expect(identityClasses).toContain('truncate')
+    expect(identityClasses).toContain('min-w-0')
+  })
+
   it('keeps full precision instead of a compact 8.3k form', () => {
     const markup = renderWithLineTotal({ added: 123456, removed: 0, mergeBase: 'base' })
 
diff --git a/src/renderer/src/components/right-sidebar/source-control-branch-context-row.tsx b/src/renderer/src/components/right-sidebar/source-control-branch-context-row.tsx
index ef36cd671..42a531a10 100644
--- a/src/renderer/src/components/right-sidebar/source-control-branch-context-row.tsx
+++ b/src/renderer/src/components/right-sidebar/source-control-branch-context-row.tsx
@@ -125,11 +125,13 @@ function HeadIdentity({ display }: { display: WorktreeGitIdentityDisplay }): Rea
 
   // Why: focusable + tooltip so truncated long branch names stay discoverable.
   // Native title omitted — Radix Tooltip already surfaces the full name on hover.
+  // `block` is load-bearing: `truncate` clips nothing on an inline box, so an
+  // inline span here let long names run under the line-total chip.
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <span
-          className="min-w-0 max-w-full truncate rounded-sm font-mono text-[10.5px] font-medium text-foreground/90 outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className="block min-w-0 max-w-full truncate rounded-sm font-mono text-[10.5px] font-medium text-foreground/90 outline-none focus-visible:ring-1 focus-visible:ring-ring"
           tabIndex={0}
           aria-label={branchAriaLabel}
           data-testid="source-control-head-identity"
@@ -255,8 +257,10 @@ function StackedCompareFlow({
     <div className="flex min-w-0 flex-1 flex-col gap-0.5">
       {/* Why: the line total belongs beside HEAD — it measures this branch's work.
           The base line keeps the commit count, which measures the comparison. */}
-      <div className="flex min-w-0 items-center gap-1.5">
-        <span className="min-w-0 flex-1">
+      {/* Why: gap-2 (not gap-1.5) — an ellipsis butting against the colored
+          counts reads as part of the branch name. */}
+      <div className="flex min-w-0 items-center gap-2">
+        <span className="flex min-w-0 flex-1 items-center">
           <HeadIdentity display={headDisplay} />
         </span>
         {headTrailing}