mirror of
https://github.com/vercel/chat.git
synced 2026-09-14 18:32:29 +08:00
vercel[bot]
0078587ac0
The previous commit let the card header row wrap, which fixed the clipping but made placement depend on each card's title length: with a 44px `Beta` badge, `Slack` (42px) and `Discord` (57px) still fit inline while `Google Chat` (93px) and `Microsoft Teams` (124px) pushed the badge onto the next line. Between roughly 430px and 560px — iPhone Pro Max width — a single grid row therefore showed both placements side by side. Wrapping is content-driven by definition, so replace it with a breakpoint switch. Below `md` (601px in the Geist scale) the header stacks: title, then badge on its own line, left-aligned, for every card. At `md` and up every card puts the badge inline to the right. Whether a badge fits is now a property of the layout, not of the name next to it. `md` is where the narrowest card can hold the widest badge with room to spare: the two-column band starts at 401px with ~123px of row width — less than the 115px `Vendor official` badge plus a gap — while at 601px the row is ~228px. Above `md` the title still wraps within its own flex item if it is long, so the badge keeps its position instead of being pushed out. Measured across 320-1440px: badge placement mode is uniform at every width (no width mixes inline and stacked), and the badge sits exactly 25px from the card edge in all 32 cards at all 22 widths sampled. Signed-off-by: aldo <5773006+aldosch@users.noreply.github.com> Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Co-Authored-By: aldo <5773006+aldosch@users.noreply.github.com>