From cbec61309a4d9b4494a76c689059c469cdd712dd Mon Sep 17 00:00:00 2001
From: DKP <8297864+D-K-P@users.noreply.github.com>
Date: Tue, 21 Jul 2026 13:48:05 +0100
Subject: [PATCH] fix(webapp): fix promo page heading typography (#4311)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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.
---
 apps/webapp/app/routes/promo.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/routes/promo.tsx b/apps/webapp/app/routes/promo.tsx
index 1ae47f573..cd8b8325c 100644
--- a/apps/webapp/app/routes/promo.tsx
+++ b/apps/webapp/app/routes/promo.tsx
@@ -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.