Phone fix — modal header crushed the title to one word per line
On the phone, the detail-modal header rendered the title and situation text one word per line. The header was a single flex row where the action buttons ate the width and the flex-1 title block collapsed. Stacked the header on mobile and grouped the buttons into a wrapping container; fixed across phrases, concepts, ai, and checks.
The owner sent a screenshot: on /phrases, the modal title read "Set / English / context" stacked vertically, and the situation line came down one word per line — "Call / starts / and / you / want / to / reduce..." — while the boxes below it were full width and fine. Unusable.
The cause was the header layout. It was a single flex items-start gap-3 row containing a min-w-0 flex-1 title block and then four action buttons (Hear, Copy, I can say it, Close) as direct siblings. On a narrow phone the buttons claimed their width and the flex-1 title block, allowed to shrink past its content by min-w-0, collapsed toward zero — so every word wrapped. The two-column body grid below was already single-column on mobile, which is why only the header broke.
The fix: make the header flex-col by default and sm:flex-row sm:items-start, and wrap the buttons in their own flex shrink-0 flex-wrap gap-2 group with 44px-ish tap heights and active states. On a phone the title block is now full width with the buttons wrapping beneath it; on larger screens it's the original row. The same modal pattern was duplicated in the concepts, AI Camp, and checks pages, so all four got the fix.
The reusable lesson: a flex-row header with a flex-1 min-w-0 text block and sibling buttons silently crushes the text on narrow screens — stack the header and put the buttons in a flex-wrap shrink-0 container rather than leaving them as row siblings.