Pricing: dashboard plan badges and tabular spec rows - #71
Conversation
Port the dashboard's PlanBadge to the /cloud pricing cards and comparison table. Replace the check-list features with hairline label | value rows, drop the Enterprise Edition ink header, and remove the MFA row. Amp-Thread-ID: https://ampcode.com/threads/T-01a0a912-5ef1-771b-a37a-182c62c1eb56 Co-authored-by: Nicholas Kissel <nicholas@rivet.gg>
|
🚅 Deployed to the website-pr-71 environment in rivet-website
|
![the-company-company[bot]](https://avatars.githubusercontent.com/in/3874572?s=60&v=4){kind=small}
| }) { | ||
| return ( | ||
| <span | ||
| className={`inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md border px-2 py-0.5 font-mono text-xs leading-4 ${PLAN_COLORS[plan]} ${className}`} |
There was a problem hiding this comment.
🟠 Medium · Plan-name badges render in mono, breaking the site's typography rules
PlanBadge renders plan names in font-mono, and on the plan cards the badge replaces the h3's CARD_TITLE_CLASS (Manrope, text-lg font-medium), so the card titles now render as font-normal mono.
This breaks two written rules in the repo's CLAUDE.md typography section: JetBrains Mono is for "code, terminal commands, keyboard keys, and tabular numeric data only — never titles, labels, or captions" (a plan badge is a label, and here it is the card title), and "card titles use font-medium … Do not introduce font-normal headings" (Tailwind preflight resets h3 to inherited weight and the badge sets none).
The dashboard port makes sense for the billing UI, but the website's design system governs here. Smallest fix: drop font-mono from the badge and add font-medium (sans, matching the site's quiet sans labels), or keep the h3 on CARD_TITLE_CLASS and use the badge as a small tag beside the title rather than as the title itself.
| {!plan.inkHeader ? ( | ||
| <h3 className={`mb-2 ${CARD_TITLE_CLASS}`}>{plan.name}</h3> | ||
| ) : null} | ||
| <h3 className="mb-3 flex items-center justify-between gap-4"> |
There was a problem hiding this comment.
🟠 Medium · Enterprise card header overflows its card across the 4-column layout
This h3 pairs a shrink-0 whitespace-nowrap badge with the "On-Prem" tag in a justify-between flex row with no wrap, but the Enterprise Edition header is wider than the card ever gets in the 4-column grid.
The math: "Enterprise Edition" at text-sm JetBrains Mono (0.6em advance) is 18 × 8.4 ≈ 151px, plus px-2 and border ≈ 169px; the EYEBROW_CLASS "On-Prem" tag is ~55px, plus gap-4 → ~240px needed. The grid gives each card (rail − 72px gaps) / 4 − 64px padding: ~150px of content width at the 1024px lg breakpoint and at most ~238px when the rail saturates at max-w-7xl. So the header overflows (or hyphen-wraps the tag into "On-"/"Prem") through the entire 1024–1536px range — the common laptop widths — and the card's overflow-hidden clips the badge at the right edge. The badge alone (~169px) already exceeds the ~150px content width at lg.
Smallest fix: let the header wrap (flex-wrap on the h3, or drop shrink-0/whitespace-nowrap from the badge), shorten the enterprise label to "Enterprise", or move the tag onto its own line above the badge.
| <dl className="mb-8 divide-y divide-ink/10 border-y border-ink/10 text-xs"> | ||
| {plan.rows.map((row) => ( | ||
| <div key={row.label} className="flex items-baseline justify-between gap-3 py-2"> | ||
| <dt className={row.value ? 'text-ink-faint' : 'text-ink-soft'}>{row.label}</dt> |
There was a problem hiding this comment.
🔵 Low · Enterprise rows emit dt elements with no dd
When a row has no value, this renders a bare <dt> with no following <dd>. The HTML content model for dl requires each group to be one or more dt followed by one or more dd, so validators (e.g. Nu Html Checker) flag these Enterprise Edition rows, and the list isn't actually name/value data — it's a plain capability list.
A ul with the same hairline row styling for the value-less case (or rendering an empty/— dd) keeps the visual design without the invalid semantics.
2 participants
Port the dashboard's
PlanBadge(fromrivet-dev/actorsfrontend/src/app/billing/billing-plan-badge.tsx) to the/cloudpricing page so plan labels match the billing UI.src/components/marketing/pricing/PlanBadge.tsx: Free emerald, Hobby orange, Team blue, Enterprise purple.Verified with
tsc(no errors in the pricing files) and rendered at 1440w and 390w.