Improving Readability on the Privacy Policy Page

Release: v1.0.356
Area: Typography & Spacing
Ticket: MOB-19

What Changed

The Privacy Policy page has received a small but meaningful readability improvement. The main content area previously carried a max-w-none Tailwind class that disabled the Tailwind Typography (prose) plugin's built-in line-length cap. This has been replaced with max-w-prose, restoring the 65ch optimal line-length constraint.

Why It Matters

Typography research consistently shows that lines longer than roughly 75–80 characters slow reading speed and increase eye-tracking effort. The Tailwind Typography plugin defaults to 65ch — approximately 65 characters — as a comfortable reading measure for long-form text like a privacy policy.

With max-w-none in place, users on mid-range viewports (768 px – 1200 px) saw text that stretched the full width of the max-w-3xl container (up to 768 px), well beyond the optimal line length. On wider displays this compounded because the outer container itself wasn't the only constraint.

Technical Detail

The fix is a single-class change in src/app/privacy/page.tsx:

- <div className="prose prose-neutral dark:prose-invert max-w-none space-y-10">
+ <div className="prose prose-neutral dark:prose-invert max-w-prose space-y-10">

The outer max-w-3xl wrapper remains unchanged and continues to govern the overall page column width. The inner max-w-prose now re-enables the prose plugin's 65ch character limit, ensuring the text block is comfortably readable regardless of viewport.

Guidance: When to Use max-w-none on Prose

Stripping max-w-none from an entire prose block is rarely the right call for flowing text. The correct pattern when a wide child element (such as a data table) needs to escape the prose width is to scope the override to that element alone:

<!-- Outer prose block keeps 65ch line length -->
<div class="prose prose-neutral dark:prose-invert max-w-prose">

  <p>Regular paragraph text, constrained to 65ch.</p>

  <!-- Wide table breaks out of prose width without affecting text -->
  <div class="not-prose overflow-x-auto">
    <table class="w-full">...</table>
  </div>

</div>

This pattern is now the recommended approach across all long-form content pages in the platform.