src/app.css

@@ -2559,8 +2559,10 @@
   }
   .branch-ref-cluster {
     display: inline-flex;
+    flex: 0 1 auto;
     align-items: center;
     min-width: 0;
+    max-width: 100%;
     margin-left: -10px;
   }
   .compact-ref-chip {
@@ -2664,7 +2666,8 @@
   .graph-row:hover .compact-ref-chip.branch,
   .graph-row.selected .compact-ref-chip.branch,
   .graph-row:focus-within .compact-ref-chip.branch {
-    max-width: min(62%, 260px);
+    flex: 1 1 auto;
+    max-width: 100%;
     padding-right: 8px;
     border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 64%, transparent);
     background:
@@ -2673,6 +2676,18 @@
       inset 2px 0 0 var(--ref-lane-color, #69a7ff),
       0 3px 12px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, rgba(0,0,0,.24));
   }
+  .graph-row:hover .commit-ref-strip,
+  .graph-row.selected .commit-ref-strip,
+  .graph-row:focus-within .commit-ref-strip {
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+  .graph-row:hover .branch-ref-cluster,
+  .graph-row.selected .branch-ref-cluster,
+  .graph-row:focus-within .branch-ref-cluster {
+    flex: 0 0 auto;
+    max-width: min(100%, 320px);
+  }
   .graph-row:hover .compact-ref-branch-icon,
   .graph-row.selected .compact-ref-branch-icon,
   .graph-row:focus-within .compact-ref-branch-icon {
@@ -3069,8 +3084,17 @@
   }
 
   @media (hover: none) {
+    .commit-ref-strip {
+      flex-wrap: wrap;
+      row-gap: 4px;
+    }
+    .branch-ref-cluster {
+      flex: 0 0 auto;
+      max-width: min(100%, 320px);
+    }
     .compact-ref-chip.branch {
-      max-width: min(62%, 260px);
+      flex: 1 1 auto;
+      max-width: 100%;
       padding-right: 8px;
     }
     .compact-ref-chip.branch > span,

src/lib/components/HistoryPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Check, Cherry, ChevronDown, ChevronRight, CloudOff, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
+  import { Cherry, ChevronDown, ChevronRight, CloudOff, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
   import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";
 
   interface GraphSegment {
@@ -544,10 +544,6 @@
     return !localBranchNameSet.has(label) && /(?:^|\/)HEAD(?:\s*->|$)/.test(ref);
   }
 
-  function remoteName(branch: string): string {
-    return branch.split("/", 1)[0] ?? branch;
-  }
-
   function configuredUpstreamForBranch(local: string): string {
     return localBranchUpstreams[local] ?? (local === activeBranch ? activeUpstream : "");
   }
@@ -649,7 +645,6 @@
   }
 
   function branchStatusLabel(branch: CommitBranchDecoration): string {
-    if (branch.trackedRemote) return `✓ ${remoteName(branch.trackedRemote)}`;
     if (branch.label === activeBranch) {
       const parts = [];
       if (activeAhead > 0) parts.push(`↑${activeAhead}`);
@@ -661,9 +656,14 @@
   }
 
   function branchDecorationTitle(branch: CommitBranchDecoration): string {
-    if (branch.localOnly) return `${branch.label} · Local only — not published yet`;
-    if (branch.trackedRemote) return `${branch.label} · up to date with ${branch.trackedRemote}`;
+    if (branch.localOnly) {
+      const status = branchStatusLabel(branch);
+      return `${branch.label} · Local only — not published yet${status ? ` · ${status}` : ""}`;
+    }
     const status = branchStatusLabel(branch);
+    if (branch.trackedRemote) {
+      return `${branch.label} · Tracks ${branch.trackedRemote}${status ? ` · ${status}` : ""}`;
+    }
     if (status) return `${branch.label} · ${status}`;
     return branch.kind === "remote" ? `Remote branch ${branch.label}` : `Local branch ${branch.label}`;
   }
@@ -865,16 +865,13 @@
                       >
                         <GitBranch class="compact-ref-branch-icon" size={10} aria-hidden="true" />
                         <span>{refSummary.primaryBranch.label}</span>
-                        {#if branchStatusLabel(refSummary.primaryBranch)}
-                          <small class:up-to-date={Boolean(refSummary.primaryBranch.trackedRemote)}>
-                            {#if refSummary.primaryBranch.trackedRemote}<Check size={9} aria-hidden="true" />{/if}
-                            {branchStatusLabel(refSummary.primaryBranch).replace(/^✓\s*/, "")}
-                          </small>
+                        {#if !refSummary.primaryBranch.localOnly && branchStatusLabel(refSummary.primaryBranch)}
+                          <small>{branchStatusLabel(refSummary.primaryBranch)}</small>
                         {/if}
                       </span>
                       {#if refSummary.primaryBranch.localOnly}
                         <span class="compact-ref-local-marker" title="This branch exists only locally and has not been published yet">
-                          <CloudOff size={9} aria-hidden="true" />LOCAL
+                          LOCAL
                         </span>
                       {/if}
                     </span>