fix(webapp): fix promo page heading typography (#4311)

## What

The `/promo` page heading rendered with overlapping lines — the two
lines of "Promo codes are for new accounts" collided.

## Why

The page used `Header2` stretched to display sizes (`sm:text-2xl
md:text-3xl lg:text-4xl`), but `Header2` bakes in a fixed `leading-6`
(24px). A 36px font in a 24px line box makes wrapped lines overlap. It
only showed at `sm`+ widths and only on headings that wrap to 2+ lines,
which is why it slipped through — the short single-line headings on the
same page looked fine.

## Fix

Switch both headings to `Header1` — the page-title primitive the sibling
login pages (`login._index`, `login.magic`) already use for exactly this
size. Add `leading-tight` (relative line-height, scales with font size,
and this heading uniquely wraps to two lines) and `pb-4` to match the
login pages' spacing convention.

## Testing

Manually verified the signed-in view (`/promo` while logged in) renders
as two clean, non-overlapping lines across breakpoints. Pure CSS/layout
change — no automated test.
This commit is contained in:
DKP
2026-07-21 13:48:05 +01:00
committed by GitHub
parent 325b906319
commit cbec61309a
+5 -5
View File
@@ -8,7 +8,7 @@ import { LoginPageLayout } from "~/components/LoginPageLayout";
import { Button, LinkButton } from "~/components/primitives/Buttons";
import { Callout } from "~/components/primitives/Callout";
import { Fieldset } from "~/components/primitives/Fieldset";
import { Header2 } from "~/components/primitives/Headers";
import { Header1 } from "~/components/primitives/Headers";
import { Paragraph } from "~/components/primitives/Paragraph";
import { TextLink } from "~/components/primitives/TextLink";
import { isGithubAuthSupported, isGoogleAuthSupported } from "~/services/auth.server";
@@ -139,9 +139,9 @@ export default function PromoPage() {
<div className="flex w-full flex-col">
{data.view === "signed_in" ? (
<>
<Header2 className="sm:text-2xl md:text-3xl lg:text-4xl" spacing>
<Header1 className="pb-4 leading-tight sm:text-2xl md:text-3xl md:leading-tight lg:text-4xl lg:leading-tight">
Promo codes are for new accounts
</Header2>
</Header1>
<Paragraph variant="base" spacing>
You're already signed in. Promo credits can only be added to a brand-new account.
</Paragraph>
@@ -151,11 +151,11 @@ export default function PromoPage() {
</>
) : (
<>
<Header2 className="sm:text-2xl md:text-3xl lg:text-4xl" spacing>
<Header1 className="pb-4 leading-tight sm:text-2xl md:text-3xl md:leading-tight lg:text-4xl lg:leading-tight">
{data.view === "valid"
? `Claim ${formatDollars(data.amountInCents)} credits`
: "Create your account"}
</Header2>
</Header1>
{data.view === "valid" ? (
<Paragraph variant="base" spacing>
These are only available for new accounts on the Free plan.