All Docs
FeaturesCalmony Sanctions MonitorUpdated March 11, 2026

Mobile Responsiveness Audit: Tailwind Breakpoint Coverage (MOB-24)

Mobile Responsiveness Audit: Tailwind Breakpoint Coverage (MOB-24)

Release: v0.1.23 · Type: Audit / Testing

As part of the platform's ongoing mobile-readiness work, we completed a Tailwind CSS responsive prefix audit across all dashboard pages. This post documents what was found, what still needs attention, and the patterns we're standardising going forward.

What Was Audited

The audit reviewed responsive prefix (sm:, md:, lg:, etc.) usage across the main application surfaces:

PageStatus
Marketing page✅ Good responsive coverage
Main dashboard page✅ Good responsive coverage
billing/page.tsx (31 KB)⚠️ Not fully reviewed — likely gaps
sanctions/page.tsx (25 KB)⚠️ Not fully reviewed — likely gaps
docs/page.tsx (19 KB)⚠️ Not fully reviewed — likely gaps
adverse-media/page.tsx⚠️ Not fully reviewed — likely gaps

Key Finding: Structural Gap in the Dashboard Layout

The most significant finding is in src/app/dashboard/layout.tsx. The sidebar is implemented with the pattern:

<aside class="hidden md:flex ...">
  <!-- sidebar content -->
</aside>

This hides the entire sidebar on screens narrower than md (768 px) — but there is no mobile navigation alternative (e.g. a hamburger menu or drawer). Users on mobile devices currently have no way to navigate between dashboard sections.

This is a structural gap that will be resolved by the mobile sidebar drawer implementation in MOB-06.

Patterns to Standardise

Once MOB-06 lands, a full audit pass of all sub-pages will follow. Two conventions are being established platform-wide:

Data Tables

All data tables must be wrapped in a horizontal scroll container to prevent overflow on small screens:

<div class="overflow-x-auto">
  <table class="...">
    ...
  </table>
</div>

Grid Layouts

All grids must start from a single-column base and expand at named breakpoints:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  ...
</div>

This ensures content is never clipped or invisible on mobile-first rendering.

Next Steps

  1. MOB-06 — Implement mobile sidebar drawer in dashboard/layout.tsx.
  2. After MOB-06 merges, audit billing/page.tsx, sanctions/page.tsx, docs/page.tsx, and adverse-media/page.tsx for tables and grids that lack the above patterns.
  3. Apply overflow-x-auto and grid-cols-1 sm:grid-cols-2 base patterns wherever missing.

This audit was performed as part of the MOB-24 control check in the v0.1.23 testing release.