From a1f5ed625c941de70e8a4e23a2d8cf58740a5bc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 20 Jun 2026 12:53:41 +0200
Subject: [PATCH] fix(coach): cap starter-question chips to a single-line pill

---
 src/components/insights/coach-panel/coach-hero.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/insights/coach-panel/coach-hero.tsx b/src/components/insights/coach-panel/coach-hero.tsx
index b014288da..38a231aa3 100644
--- a/src/components/insights/coach-panel/coach-hero.tsx
+++ b/src/components/insights/coach-panel/coach-hero.tsx
@@ -110,16 +110,20 @@ export function CoachHero({ composer, prompts, onPickPrompt }: CoachHeroProps) {
                 type="button"
                 onClick={() => onPickPrompt(prompt)}
                 data-slot="coach-hero-chip"
+                title={prompt}
                 className={cn(
                   "border-dracula-purple/20 hover:border-dracula-purple/45 hover:text-foreground",
-                  "text-muted-foreground inline-flex min-h-11 items-center gap-1.5 sm:min-h-9",
+                  "text-muted-foreground inline-flex min-h-11 max-w-full items-center gap-1.5 sm:min-h-9 sm:max-w-[18rem]",
                   "rounded-full border bg-transparent px-3.5 py-1.5 text-xs sm:text-sm",
                   "transition-colors focus-visible:ring-2 focus-visible:outline-none",
                   "focus-visible:ring-dracula-purple/50",
                 )}
               >
                 <Quote className="size-3 shrink-0" aria-hidden="true" />
-                <span>{prompt}</span>
+                {/* Cap the chip to a tidy single line — long localized prompts
+                    (notably DE) otherwise wrap to ragged multi-line pills on a
+                    narrow viewport. The full prompt stays available via title. */}
+                <span className="truncate">{prompt}</span>
               </button>
             ))}
           </div>