From 9d22412caf03b1c520eda713f971caae7d49a3cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 28 Jun 2026 15:38:35 +0200
Subject: [PATCH] fix(coach): size the example opener to its text and keep it
 single-line

The ambient example opener was stretched to the full composer width, leaving
a large empty tail that read as broken. Size it to its text instead (capped at
the full width) and guarantee a single line: the question truncates with an
ellipsis on a narrow phone rather than wrapping or forcing a horizontal scroll.
---
 .../__tests__/scope-hint-badge.test.tsx       | 17 +++++++++++++++--
 .../insights/coach-panel/scope-hint-badge.tsx | 19 +++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/insights/coach-panel/__tests__/scope-hint-badge.test.tsx b/src/components/insights/coach-panel/__tests__/scope-hint-badge.test.tsx
index 268bce7a0..86003e2b3 100644
--- a/src/components/insights/coach-panel/__tests__/scope-hint-badge.test.tsx
+++ b/src/components/insights/coach-panel/__tests__/scope-hint-badge.test.tsx
@@ -112,7 +112,7 @@ describe("<ScopeHintBadge>", () => {
     expect(html).not.toContain('data-slot="coach-scope-hint-dismiss"');
   });
 
-  it("lets the seeded opener fill its column (no max-w-md cap)", () => {
+  it("sizes the seeded opener to its text and keeps it single-line", () => {
     const html = render(
       <ScopeHintBadge
         variant="seeded"
@@ -122,8 +122,21 @@ describe("<ScopeHintBadge>", () => {
         onDismiss={() => {}}
       />,
     );
-    // The opener grows to the composer column width; the old narrow cap is gone.
+    const seedTag = html.match(
+      /<button[^>]*data-slot="coach-scope-hint-seed"[^>]*>/,
+    );
+    expect(seedTag).not.toBeNull();
+    // v1.25.0 — intrinsic width, not stretched to the composer column: the
+    // opener grows to its text and caps at the full width. The old narrow cap
+    // and the full-width stretch are both gone.
     expect(html).not.toContain("max-w-md");
+    // Intrinsic width capped at the column: `inline-flex` + `max-w-full`, not
+    // the old `flex-1` / `w-full` full-width stretch.
+    expect(seedTag?.[0]).toContain("inline-flex");
+    expect(seedTag?.[0]).toContain("max-w-full");
+    expect(seedTag?.[0]).not.toMatch(/\bflex-1\b/);
+    // The question span truncates with an ellipsis rather than wrapping.
+    expect(html).toContain("truncate");
   });
 });
 
diff --git a/src/components/insights/coach-panel/scope-hint-badge.tsx b/src/components/insights/coach-panel/scope-hint-badge.tsx
index 370231e9a..8fbc980ec 100644
--- a/src/components/insights/coach-panel/scope-hint-badge.tsx
+++ b/src/components/insights/coach-panel/scope-hint-badge.tsx
@@ -91,28 +91,31 @@ export function ScopeHintBadge({
       </span>
 
       {/* The tappable seed question — the data-aware opener. A real button so
-          keyboard + screen-reader users get the same affordance. The opener
-          fills the column (= the composer's max-width) so it reads as one line
-          with the field below; the seeded variant adds a dismiss control at the
-          trailing edge, mirroring the composer's send affordance. */}
-      <div className="flex w-full items-center gap-1.5">
+          keyboard + screen-reader users get the same affordance. v1.25.0 — the
+          opener sizes to its TEXT (intrinsic width, centred) instead of being
+          stretched to the full composer width, which left a large empty tail
+          that read as broken. It is guaranteed single-line: the question
+          truncates with an ellipsis on a narrow phone rather than wrapping or
+          forcing a horizontal scroll. The seeded variant keeps the dismiss
+          control at the trailing edge. */}
+      <div className="flex w-full items-center justify-center gap-1.5">
         <button
           type="button"
           data-slot="coach-scope-hint-seed"
           onClick={() => onSeed(question)}
           className={cn(
             "group border-border/70 bg-background hover:bg-muted/50 text-foreground",
-            "flex min-w-0 flex-1 items-center gap-2 rounded-xl border px-3.5 py-2.5 text-left",
+            "inline-flex max-w-full min-w-0 items-center gap-2 rounded-xl border px-3.5 py-2.5 text-left",
             "transition-colors",
             "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
           )}
         >
-          <span className="min-w-0 flex-1 text-sm leading-snug">
+          <span className="min-w-0 truncate text-sm leading-snug">
             {question}
           </span>
           <span
             aria-hidden="true"
-            className="text-muted-foreground group-hover:text-foreground text-xs whitespace-nowrap"
+            className="text-muted-foreground group-hover:text-foreground shrink-0 text-xs whitespace-nowrap"
           >
             {t("insights.coach.scope.tap")}
           </span>