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.
This commit is contained in:
Marc-André Bombeck committed 2026-06-28 16:04:22 +02:00
1 parent 3a84a07423
commit 9d22412caf
2 files changed
+26 -10

No files matched your search

@@ -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");
});
});
@@ -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>