MOB-03: Responsive Text Scaling Across Public Pages

Released in: v1.0.346
Type: CSS-only fix · No functional impact

Overview

Headings on six public-facing pages previously used a single fixed Tailwind font-size class with no consideration for narrow viewports. On devices with a screen width of 375 px or less this caused headlines to render larger than the available content area could comfortably accommodate, degrading readability and visual hierarchy.

This release applies mobile-first breakpoint variants to all affected headings, ensuring text scales smoothly from small phones through tablets and desktops.

What changed

All changes are confined to Tailwind utility classes on <h1> and <h2> elements. No page copy, component logic, routing, or API behaviour was modified.

Scaling pattern

The fix follows a consistent three-step scale:

base (< 640 px)  →  sm: (≥ 640 px)  →  md: (≥ 768 px)

For example, the home page hero heading now reads:

<!-- Before -->
<h1 class="text-3xl sm:text-4xl md:text-6xl">

<!-- After -->
<h1 class="text-2xl sm:text-4xl md:text-6xl">

And a two-step heading (no prior sm: variant) gains an intermediate size:

<!-- Before -->
<h2 class="text-3xl md:text-4xl">

<!-- After -->
<h2 class="text-2xl sm:text-3xl md:text-4xl">

Pages updated

• Dashboard (src/app/dashboard/page.tsx) — welcome / page title <h1>
• Home (src/app/page.tsx) — hero <h1>, Features section <h2>, Compliance section <h2>, CTA banner <h2>
• Pricing (src/app/pricing/page.tsx) — hero <h1>, FAQ section <h2>
• Privacy Policy (src/app/privacy/page.tsx) — page title <h1>
• Terms of Service (src/app/terms/page.tsx) — page title <h1>
• ROPA (src/app/ropa/page.tsx) — page title <h1>

Design rationale

• Mobile-first: the smallest size is the base class; larger sizes are opt-in via sm: and md: prefixes. This matches Tailwind's recommended authoring approach and the pattern already established on the pricing hero.
• Incremental steps: reducing the base size by one Tailwind step (e.g. text-3xl → text-2xl) keeps the visual jump between breakpoints proportional rather than abrupt.
• No layout impact: because only font-size changes, surrounding padding, margin, and grid structures are unaffected.

Testing

Verify the changes by resizing the browser or using device emulation in DevTools:

Viewport	Expected heading size
320 – 639 px	Smallest (base class, e.g. text-xl or text-2xl)
640 – 767 px	Medium (sm: class, e.g. text-2xl or text-3xl)
768 px +	Largest (md: class, e.g. text-3xl, text-4xl, or text-6xl)

No automated tests were required or added — the changes carry zero risk to application functionality.