fix(docs): stop the vendor-official badge clipping adapter card titles

[aldosch]

Summary

On phones the Vendor official badge on the adapters listing sat on top of the card title and cut it off — Liveblocks rendered as Liveblo, Sendblue as Sendb, AgentPhone as AgentP — and the badge itself ran past the card's right edge.

Root cause is a size collision, not a z-index or spacing issue:

• @vercel/geistdocs' Geist breakpoints put sm at 401px, not 640px, so grid gap-4 sm:grid-cols-2 goes two-up on every modern phone (Pixel 7 = 412px, iPhone 16 Pro Max = 430px). Each card is then ~175px wide, leaving ~125px of content width inside p-6.
• The Vendor official badge is 115px and, via badgeVariants, whitespace-nowrap shrink-0 — so it claimed almost the entire row.
• The header row was a non-wrapping justify-between flex row, and the docs CSS applies a global min-width: 0 reset, which defeats flexbox's automatic minimum size. The title's flex item was squeezed to 51px while its text needed 80px, so the name spilled to the right underneath the opaque badge and overflow-hidden on the Card clipped the remainder.

Approach

The header row now switches placement on the breakpoint, not on the title:

• Below md (601px) the header stacks — title, then badge on its own line, left-aligned — for every card.
• At md and above every card puts the badge inline to the right, exactly as it does today.

md is the point where the narrowest card can hold the widest badge with room to spare. The two-column band opens at 401px with only ~123px of row width, less than the 115px Vendor official badge plus a gap; by 601px the row is ~228px. Above md a long title wraps within its own flex item rather than pushing the badge out, so the badge keeps its position.

Supporting changes in the same row:

• shrink-0 on CardAction. The Badge already had it, but its wrapper did not, so the wrapper was shrinking to a smaller box than its own content.
• min-w-0 + break-words on the title, so a long single-word name breaks rather than spilling.
• shrink-0 on the platform logo, which was being squashed out of square on narrow cards — the Microsoft Teams mark rendered 12x20 instead of 20x20, and Google Chat 14.5x20.

One file, five class-list changes; no data, copy, or component-API changes.

Why not flex-wrap (the first commit in this PR)

Letting the row wrap fixes the clipping, but wrapping is content-driven: with the 44px Beta badge, Slack (42px) and Discord (57px) still fit inline while Google Chat (93px) and Microsoft Teams (124px) pushed the badge to the next line. Between ~430px and ~560px a single grid row showed both placements side by side. The second commit replaces it with the breakpoint switch above.

Test plan

Ran pnpm --filter docs dev and measured /adapters in a real browser at 320, 360, 375, 390, 400, 401, 412, 430, 470, 500, 560, 600, 601, 640, 700, 768, 900, 960, 961, 1024, 1280 and 1440px, asserting per card that placement mode is uniform across the page, the badge sits a constant distance from the card edge, the header row does not overflow, the title does not spill, the badge stays inside the card's content box, and every logo renders 20x20.

	main	flex-wrap (1st commit)	this PR
widths mixing inline + stacked badges	0 (all clipped instead)	430–560px	none
distinct badge offsets from card edge	—	—	25px, all 32 cards, all 22 widths
cards with a clipped title or badge @412px	13	0	0
worst header-row overflow	68px	0	0
worst title spill	29px	0	0
squashed logos	5+	0	0

Also confirmed visually at 430px (uniform stacked badges where the mixed placement was reported), 640px (uniform inline badges, including the one title that wraps to two lines) and 1440px (three-column layout unchanged from main), plus on the PR's own preview deployment.

One known sub-pixel residual: at exactly 401px — the two-column breakpoint boundary, where cards are 169px — PostgreSQL plus its 20px logo needs 0.89px more than the row, so the final glyph loses under a pixel to overflow-hidden. wrap-anywhere removes it but renders the name as PostgreSQ / L, which is a worse outcome for an invisible gain, so break-words is kept.

Also ran npx ultracite check apps/docs/app (clean) and tsc --noEmit for apps/docs (clean).

Checklist

• All commits are signed and verified
• All commits are signed off for the DCO (git commit -s)
• pnpm validate passes — not run in full; it builds every package and needs adapter credentials. Ran the parts that cover this change: ultracite check apps/docs/app and tsc --noEmit in apps/docs, both clean.
• Changeset added (or N/A) — N/A, apps/docs is private and CONTRIBUTING lists documentation changes as not needing one.
• Documentation updated (or N/A) — N/A, no content change.

Note

The commits are GPG-verified, but they were authored through a Vercel Devbox, so the author identity is vercel[bot] with Signed-off-by/Co-Authored-By trailers for @aldosch. If the DCO check wants the sign-off to match the author line, say so and I'll push a remediation commit (allowRemediationCommits.individual is enabled).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
chat	Ready	Preview, v0	Sep 3, 2026 11:50pm UTC
chat-sdk-nextjs-chat	Ready	Preview, v0	Sep 3, 2026 11:50pm UTC

[aldosch]

not ideal because now we have inconsistent badge placement depending on card title length