From d7a95874c242a6d3520238e9ee51cabd776662e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Fri, 7 Aug 2026 16:39:50 +0200 Subject: [PATCH] fix(coach): centre the composer text in its input pill On a phone the placeholder sat noticeably low. The composer row was bottom-aligned so the send button would stay beside the last line as the textarea grows, but that also bottom-aligned a single-line textarea against a 44 px touch target: 7 px of space above the text and 1 px below. The row centres its textarea now and the controls keep their own bottom alignment, so both properties hold. Measured empty, one line and four lines, phone and desktop: the single-line gap goes 7/1 to 4/4 on a phone and 2/1 to 2/2 on desktop, and the multi-line case is unchanged with the send button still level with the last line. --- .../coach-panel/__tests__/coach-input.test.tsx | 10 +++++++--- .../insights/coach-panel/coach-input.tsx | 14 ++++++++++---- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/insights/coach-panel/__tests__/coach-input.test.tsx b/src/components/insights/coach-panel/__tests__/coach-input.test.tsx index 1ee7ef2c9..caa593af2 100644 --- a/src/components/insights/coach-panel/__tests__/coach-input.test.tsx +++ b/src/components/insights/coach-panel/__tests__/coach-input.test.tsx @@ -267,11 +267,15 @@ describe("", () => { expect(controls?.[0]).not.toMatch(/\bjustify-between\b/); expect(controls?.[0]).toMatch(/\bshrink-0\b/); - // And the row itself is a row at every width, bottom-aligned so the send - // button stays beside the last line as the textarea grows. + // And the row itself is a row at every width. The textarea is centred in + // it — bottom-aligning a one-line textarea against a 44 px tap target left + // the placeholder sitting visibly low in the pill — while the controls + // keep their own bottom alignment, so the send button stays beside the + // LAST line as the textarea grows rather than drifting to the middle. const shell = html.match(/]*class="[^"]*\bflex-row\b[^"]*"[^>]*>/); - expect(shell?.[0]).toMatch(/\bitems-end\b/); + expect(shell?.[0]).toMatch(/\bitems-center\b/); expect(shell?.[0]).not.toMatch(/\bflex-col\b/); + expect(controls?.[0]).toMatch(/\bself-end\b/); }); it("sizes the hub actions trigger to the 44px tap-target floor on phones", () => { diff --git a/src/components/insights/coach-panel/coach-input.tsx b/src/components/insights/coach-panel/coach-input.tsx index a17d49b7e..44f6783b8 100644 --- a/src/components/insights/coach-panel/coach-input.tsx +++ b/src/components/insights/coach-panel/coach-input.tsx @@ -427,9 +427,15 @@ export function CoachInput({ // hold: focus follows DOM order, and the DOM order (textarea, // actions, Send) is identical in both layouts. Nothing jumps. // - // `items-end` keeps the controls beside the LAST line as the textarea - // grows, so the send button stays where the thumb left it. - "flex flex-row items-end gap-1.5 p-1.5", + // `items-center` with the controls pinned `self-end` below. The row + // used to be `items-end` throughout, which bottom-aligned an empty + // one-line textarea against a 44 px touch target: the placeholder sat + // roughly 6 px low in the pill, reading as if the text had slipped. + // Centring the textarea fixes the empty and single-line cases, and + // `self-end` on the controls preserves the reason `items-end` was + // there — as the textarea grows, the send button stays beside the + // LAST line rather than drifting to the middle. + "flex flex-row items-center gap-1.5 p-1.5", )} >