MOB-24: Responsive Breakpoints Audit — What We Found and What Comes Next

Release: v0.1.57 | Category: Mobile / Testing

---

Background

As part of the ongoing mobile-readiness work, MOB-24 audited Tailwind CSS responsive-prefix coverage across the platform's dashboard pages. The goal was to identify where breakpoints are missing or inconsistent so that fixes can be targeted efficiently.

What Was Audited

The audit focused on two areas:

1. Marketing page and main dashboard page — both were found to use responsive prefixes well.
2. Dashboard sub-pages — several large files were reviewed for breakpoint coverage.

Key Findings

Structural Gap in the Dashboard Layout

The most significant finding is in src/app/dashboard/layout.tsx. The sidebar is rendered with hidden md:flex, meaning it is hidden on mobile and shown on medium-and-above screens. There is currently no mobile navigation component to replace it on small screens.

This is a structural gap — it cannot be fixed simply by adding responsive prefixes to individual elements. It requires a dedicated mobile sidebar drawer, tracked under MOB-06.

Sub-pages Requiring Follow-up

The following dashboard sub-pages are large files that were not fully reviewed during this audit. They are flagged for a targeted breakpoint pass after MOB-06 is implemented:

Page	File Size	Risk Areas
Billing	billing/page.tsx — 31 KB	Tables, pricing grids
Sanctions	sanctions/page.tsx — 25 KB	Data tables, result lists
Docs	docs/page.tsx — 19 KB	Content layout, navigation
Adverse Media	adverse-media/page.tsx	Data tables, result lists

Recommended Conventions

To ensure consistency going forward, all dashboard sub-pages should follow these two patterns:

Data Tables

All tables must be wrapped in an overflow-x-auto container to prevent horizontal scroll breakage on small screens:

<div class="overflow-x-auto">
  <table class="min-w-full ...">
    <!-- table content -->
  </table>
</div>

Grid Layouts

All grids should use a mobile-first column pattern before adding wider breakpoints:

<!-- Mobile-first: 1 col → 2 col on sm → more on lg -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- grid items -->
</div>

What Comes Next

1. MOB-06 — Mobile Sidebar Drawer: Implements a slide-in navigation drawer for mobile viewports, resolving the structural gap in dashboard/layout.tsx.
2. Post-MOB-06 Audit: Once the drawer is in place, billing/page.tsx, sanctions/page.tsx, docs/page.tsx, and adverse-media/page.tsx will be audited and updated to conform to the conventions above.
3. Layout Conventions Reference: A shared document codifying Tailwind layout patterns for dashboard pages will be established to prevent regressions.