fix(coach): keep the composer placeholder on one line

Shorten the composer placeholder across all locales to a short, inviting
one-liner and clip the placeholder pseudo-element so a longer hint can
never wrap to a second line inside the single-row composer on a narrow
phone. The textarea value still wraps and auto-grows for real typing.
This commit is contained in:
Marc-André Bombeck committed 2026-06-27 18:03:55 +02:00
1 parent 6d990b769c
commit 37339cf83e
8 files changed
+13 -8

No files matched your search

@@ -49,7 +49,7 @@ describe("<CoachInput>", () => {
const html = render(
<CoachInput value="" onChange={() => {}} onSubmit={() => {}} />,
);
expect(html).toContain("Ask anything about your data");
expect(html).toContain("Ask me anything");
expect(html).not.toContain('data-slot="coach-input-hint"');
expect(html).not.toContain("Press Enter to send");
expect(html).toContain('data-slot="coach-input-send"');
@@ -60,7 +60,7 @@ describe("<CoachInput>", () => {
<CoachInput value="" onChange={() => {}} onSubmit={() => {}} />,
"de",
);
expect(html).toContain("Frag mich etwas zu deinen Daten");
expect(html).toContain("Frag mich etwas");
});
it("disables the send button when the value is empty", () => {
@@ -567,6 +567,11 @@ export function CoachInput({
// scroll regions). Scoped here, not in globals.css.
"[scrollbar-width:thin] [scrollbar-color:color-mix(in_srgb,var(--dracula-purple)_35%,transparent)_transparent]",
"placeholder:text-muted-foreground disabled:opacity-60",
// Keep the placeholder a single line on narrow phones: a long
// hint used to wrap to two lines inside the one-row composer and
// read as a cramped block. Clip the PLACEHOLDER pseudo only — the
// textarea value still wraps and auto-grows for real typing.
"placeholder:overflow-hidden placeholder:text-ellipsis placeholder:whitespace-nowrap",
)}
/>
{showHub ? (