Improved Mobile Readability: Responsive Text Scaling on Public Pages

Release: v1.0.347
Date: 2026-03-09
Ticket: MOB-03

Overview

Headings on public-facing pages previously used a single fixed Tailwind text size with no mobile-specific variant. On small screens (≤375 px width — common on older iPhones and budget Android devices) this caused headings to appear oversized relative to the available viewport, disrupting the visual hierarchy and reducing readability.

v1.0.347 resolves this by applying a consistent mobile-first breakpoint pattern across all affected headings.

What Changed

Ten headings across six pages were updated. Each heading now defines its smallest size as the base class, with progressively larger sizes added via sm: and md: Tailwind prefixes.

Affected Pages

• Home (/) — Hero h1, Features section h2, Compliance section h2, CTA banner h2
• Dashboard (/dashboard) — Welcome h1
• Pricing (/pricing) — Hero h1, FAQ section h2
• Privacy Policy (/privacy) — Page h1
• Terms of Service (/terms) — Page h1
• Register of Processing Activities (/ropa) — Page h1

Breakpoint Pattern

The changes follow two standard step-down patterns depending on how many breakpoints the heading already used:

Two-step (was single size):

text-2xl sm:text-3xl        /* e.g. Privacy, Terms, ROPA page titles */
text-xl  sm:text-2xl        /* e.g. Dashboard welcome, FAQ h2 */

Three-step (added a mobile base to an existing sm/md scale):

text-2xl sm:text-4xl md:text-6xl    /* Home hero h1 */
text-2xl sm:text-3xl md:text-4xl    /* Features h2 */
text-xl  sm:text-2xl md:text-3xl    /* Compliance h2, CTA h2 */
text-2xl sm:text-3xl md:text-5xl    /* Pricing hero h1 */

Scope and Risk

This release contains CSS class changes only. No application logic, routing, data fetching, copy, or component structure was modified. The changes are purely presentational and carry no functional risk.

No Action Required

The update is applied automatically. No configuration changes or user actions are needed.