355f242b8f820f960b8c9ad5b78010eaa44f7c61
User reported the search bar dropping to a second row + the top-right buttons (+ New / Inbox / Avatar) going missing as they resized the browser. Playwright probe confirmed: at every width 780-1280 the search bar's intrinsic `max-w-2xl` (672px) forced the topbar's center grid column to expand to that width, leaving the right column too narrow to hold "+ New + Inbox + Avatar" without overlapping the search OR going off-screen. Two coordinated fixes: 1. Grid template `auto_1fr_auto` instead of `1fr_minmax(280,800)_1fr`. Side columns now size to their actual content (logo + breadcrumbs on the left; New + Inbox + Avatar on the right); the center column takes whatever's left. No more "intrinsic content forces the column to grow" behaviour. 2. Search wrapper max-width scales by tier: max-w-md (448px) at base, lg:max-w-xl (576px), xl:max-w-2xl (672px). Generous enough on wide screens, restrained enough on narrow ones so the side columns always get the space they need. Verified via Playwright probe at 780/900/1023/1024/1100/1280 — "+ New" button now lands inside the header at every width. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Description
No description provided
Languages
TypeScript
98.7%
HTML
1%
CSS
0.1%
Shell
0.1%