grant/keysat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile responsiveness pass — buy / recover / thank-you

Browse Source 
The recurring-subs work just added new tier-card content (cadence
line + trial banner + /mo suffix), so a quick pass on the three
buyer-facing pages was timely. Targeted, CSS-only changes.

Buy page (`/buy/<slug>`):
- h1 uses clamp(28px, 7vw, 42px) so it scales smoothly from phones
  to desktop without cliff-edge breakpoints. The fixed 42px was
  cramping 360-380px viewports.
- New @media (max-width:480px) breakpoint tightens the outer rhythm:
  topbar padding, wrap margin, cert padding, price size, tier-card
  padding, etc. The desktop 48px outer + 32px cert padding ate too
  much of a small viewport.
- Form input font-size pinned to 16px on mobile so iOS Safari
  doesn't auto-zoom when the buyer taps the email or discount field.
  (iOS zooms on any <16px input, which interrupts the buy flow.)
- Tier picker already had a 560px breakpoint dropping to 1-column;
  unchanged.

Recovery page (`/recover`):
- Default input/button font-size raised to 16px (iOS zoom fix).
- New @media (max-width:480px) breakpoint reduces outer body
  padding (48px → 24px) and main padding (32px → 22px), tightens
  h1 + label, and bumps button padding for thumb-friendly tap
  targets.

Thank-you page (`/thank-you`):
- Adds a @media (max-width:480px) block — previously it had zero
  breakpoints. Mirrors the buy-page pattern: tighter topbar, wrap
  margin, card padding, h1 fluid scaling, lede + footer sizing.

Admin UI is operator-side and not addressed in this pass. Could be
revisited if operators report mobile pain points; for now the
buyer-facing surface is the priority because that's where buyers
actually arrive on phones.
This commit is contained in:
Grant
2026-05-08 18:07:06 -05:00
parent 6112618c1b
commit 938eedc99f
3 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
licensing-service/src/api/recover.rs
+13 -2
View File
@@ -191,11 +191,13 @@ const RECOVER_PAGE_HTML: &str = r##"<!DOCTYPE html>
h1 { margin: 0 0 8px; font-family: "Archivo", Georgia, serif; font-weight: 600; font-size: 24px; }
p.intro { margin: 0 0 24px; color: #5a6178; line-height: 1.5; }
label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
/* font-size: 16px on inputs prevents iOS Safari from zooming in
when the user taps a field (it auto-zooms for anything <16px). */
input { width: 100%; padding: 10px 12px; box-sizing: border-box;
border: 1px solid #c5b994; border-radius: 6px; font-size: 15px;
border: 1px solid #c5b994; border-radius: 6px; font-size: 16px;
font-family: "JetBrains Mono", Menlo, monospace; }
button { margin-top: 20px; width: 100%; padding: 12px; background: #1a2238;
color: #f6f1e7; border: 0; border-radius: 6px; font-size: 15px;
color: #f6f1e7; border: 0; border-radius: 6px; font-size: 16px;
font-weight: 600; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: wait; }
pre { margin: 16px 0 0; padding: 12px; background: #1a2238; color: #f6f1e7;
@@ -203,6 +205,15 @@ const RECOVER_PAGE_HTML: &str = r##"<!DOCTYPE html>
white-space: pre-wrap; }
.err { color: #b03020; margin-top: 12px; font-size: 14px; }
.ok { color: #1a6b3a; margin-top: 12px; font-size: 14px; font-weight: 600; }
/* Tighten on narrow phones — the desktop 48px outer padding +
32px card padding eats the viewport on 360px screens. */
@media (max-width: 480px) {
body { padding: 24px 12px; }
main { padding: 22px 18px; border-radius: 10px; }
h1 { font-size: 21px; }
label { font-size: 13px; }
button { padding: 14px; }
}
</style>
</head>
<body>