From c1144b3c4c3b355bdc8b822dc98d21fa77f231b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 8 Oct 2026 21:44:17 +0200
Subject: [PATCH] fix(ui): let a truncating label actually truncate

A span marked both shrink-0 and truncate never gives up width, so a
long source name on a collapsed priority group squeezed the metric
label at phone width, and a long month marker in the document flow
could overrun its cell. Both shrink now and cut with an ellipsis.
---
 src/components/documents/document-month-grid.tsx      |  2 +-
 .../__tests__/sources-section-in-use.test.tsx         | 11 +++++++++++
 src/components/settings/sources-section.tsx           |  8 +++++++-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/documents/document-month-grid.tsx b/src/components/documents/document-month-grid.tsx
index 962f59ac7..fbad5dbdb 100644
--- a/src/components/documents/document-month-grid.tsx
+++ b/src/components/documents/document-month-grid.tsx
@@ -76,7 +76,7 @@ function FlowMonthMarker({ label }: { label: string }) {
       data-slot="document-flow-month"
       className="absolute inset-x-0 -top-6 flex h-6 items-center gap-2"
     >
-      <span className="text-muted-foreground shrink-0 truncate text-xs font-medium tracking-wide uppercase">
+      <span className="text-muted-foreground min-w-0 truncate text-xs font-medium tracking-wide uppercase">
         {label}
       </span>
       <span aria-hidden className="bg-border h-px flex-1" />
diff --git a/src/components/settings/__tests__/sources-section-in-use.test.tsx b/src/components/settings/__tests__/sources-section-in-use.test.tsx
index a99f7a2a8..4d285b3da 100644
--- a/src/components/settings/__tests__/sources-section-in-use.test.tsx
+++ b/src/components/settings/__tests__/sources-section-in-use.test.tsx
@@ -54,6 +54,17 @@ describe("Settings → Source priority, sources in use", () => {
     for (const id of controls) expect(html).toContain(`id="${id}"`);
   });
 
+  it("lets a collapsed group's winner truncate instead of squeezing the label", () => {
+    const html = render(["WITHINGS", "MANUAL"]);
+    const winner = html.match(
+      /data-slot="sources-metric-winner" class="([^"]*)"/,
+    )?.[1];
+    expect(winner).toBeDefined();
+    expect(winner).toMatch(/\btruncate\b/);
+    expect(winner).toMatch(/\bmin-w-0\b/);
+    expect(winner).not.toMatch(/\bshrink-0\b/);
+  });
+
   it("says so when no source is in use at all", () => {
     expect(render([])).toContain('data-testid="sources-none-in-use"');
   });
diff --git a/src/components/settings/sources-section.tsx b/src/components/settings/sources-section.tsx
index 69dd2b3ae..30dbba232 100644
--- a/src/components/settings/sources-section.tsx
+++ b/src/components/settings/sources-section.tsx
@@ -415,7 +415,13 @@ export function SourcesSection() {
                     </span>
                     {/* Collapsed, the group still says who wins. */}
                     {!open && list[0] ? (
-                      <span className="text-muted-foreground shrink-0 truncate text-xs">
+                      <span
+                        data-slot="sources-metric-winner"
+                        // `truncate` needs room to give up: a shrink-0 span
+                        // never cut, and a long source name squeezed the
+                        // metric label at 390 px instead.
+                        className="text-muted-foreground max-w-[45%] min-w-0 truncate text-xs"
+                      >
                         {t(MEASUREMENT_SOURCE_SETTINGS_LABEL_KEYS[list[0]])}
                       </span>
                     ) : null}