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/mod.rs
+12
View File
@@ -660,6 +660,18 @@ footer.kfooter {{
}}
footer.kfooter a {{ color:var(--ink-500); text-decoration:none; }}
footer.kfooter a:hover {{ color:var(--navy-900); }}
/* Mobile breakpoint — desktop-rhythm padding crowds 360-390px screens. */
@media (max-width:480px) {{
.topbar {{ padding:12px 16px; }}
.topbar .inner {{ font-size:13px; letter-spacing:0.22em; gap:8px; }}
.topbar .operator {{ font-size:11px; }}
.wrap {{ margin:24px auto; padding:0 16px; }}
h1 {{ font-size:clamp(26px, 7vw, 38px); }}
.lede {{ font-size:15px; margin:0 0 22px; }}
.pending-card, .license-success, .error-card {{ padding:22px 20px 20px; }}
.pending-card h2 {{ font-size:20px; }}
footer.kfooter {{ margin-top:32px; padding:14px; }}
}}
</style>
</head>
<body>