From 067b0d314593a84b4f6ff88dbcea0015ee1fade8 Mon Sep 17 00:00:00 2001
From: D-K-P <8297864+D-K-P@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:13:49 +0100
Subject: [PATCH 1/2] fix(webapp): fix promo page heading typography

The promo page stretched Header2 to display sizes, but Header2's fixed
leading-6 collapsed the multi-line title so the two lines overlapped.
Switch to Header1 (the page-title primitive, used by the login pages)
with leading-tight and pb-4 for correct line-height and spacing.
---
 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 1ae47f5732e..d8e2c4c1a4c 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 lg:text-4xl">
               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 lg:text-4xl">
               {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.

From c710206779987e49415c2ee6e536fe7f4469cc03 Mon Sep 17 00:00:00 2001
From: D-K-P <8297864+D-K-P@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:32:10 +0100
Subject: [PATCH 2/2] fix(webapp): force promo heading leading-tight at all
 breakpoints

Header1's responsive font-size overrides (md:text-3xl, lg:text-4xl)
carry their own line-heights, so a single base leading-tight did not
reliably win at md/lg widths and the wrapped title could still overlap.
Set leading-tight explicitly per breakpoint, ordered after each font
size, so the relative 1.25 line-height always applies.
---
 apps/webapp/app/routes/promo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/promo.tsx b/apps/webapp/app/routes/promo.tsx
index d8e2c4c1a4c..cd8b8325c9a 100644
--- a/apps/webapp/app/routes/promo.tsx
+++ b/apps/webapp/app/routes/promo.tsx
@@ -139,7 +139,7 @@ export default function PromoPage() {
       <div className="flex w-full flex-col">
         {data.view === "signed_in" ? (
           <>
-            <Header1 className="pb-4 leading-tight sm:text-2xl md:text-3xl lg:text-4xl">
+            <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
             </Header1>
             <Paragraph variant="base" spacing>
@@ -151,7 +151,7 @@ export default function PromoPage() {
           </>
         ) : (
           <>
-            <Header1 className="pb-4 leading-tight sm:text-2xl md:text-3xl lg:text-4xl">
+            <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"}