All Docs
FeaturesCalmony Sanctions MonitorUpdated March 11, 2026

Responsive Breakpoint Coverage Audit (MOB-24)

Responsive Breakpoint Coverage Audit (MOB-24)

This article summarises the findings of the MOB-24 audit into Tailwind CSS responsive prefix usage across dashboard pages, and outlines the patterns that should be applied as fixes are rolled out.

What Was Audited

The audit reviewed responsive prefix (sm:, md:, lg:, etc.) coverage across the platform's main pages:

  • Marketing page — ✅ Good breakpoint coverage
  • Main dashboard page — ✅ Good breakpoint coverage
  • Dashboard sub-pages — ⚠️ Incomplete coverage (see below)

Structural Gap: Dashboard Layout

The most significant finding is in src/app/dashboard/layout.tsx. The sidebar is conditionally hidden on mobile using:

// Current pattern — sidebar not accessible on mobile
<aside className="hidden md:flex ...">
  {/* sidebar content */}
</aside>

There is currently no mobile navigation drawer to replace the sidebar on small screens. This means mobile users of all dashboard sub-pages have no navigation. This is tracked as a separate work item under MOB-06 and must be resolved before the sub-page breakpoint fixes will be fully effective.

Dashboard Sub-Pages with Incomplete Coverage

The following sub-pages are large files that were not fully reviewed but are expected to have limited mobile-first breakpoint usage:

billing/page.tsx (31 KB)

Likely contains data tables and summary grids. These should be audited for:

  • Missing overflow-x-auto on table wrappers
  • Grid columns that don't collapse to a single column on mobile

sanctions/page.tsx (25 KB)

As the primary screening results page, this likely contains dense data tables. Recommended fixes:

  • Wrap all <table> elements in <div className="overflow-x-auto">
  • Ensure any result cards or grids use grid-cols-1 sm:grid-cols-2 lg:grid-cols-3

docs/page.tsx (19 KB)

Content-heavy page that may contain multi-column layouts without mobile-first base patterns.

adverse-media/page.tsx

Not fully reviewed. Should be included in the same audit pass as the pages above.

Recommended Patterns

When fixing responsive coverage across dashboard sub-pages, apply the following conventions consistently.

Data Tables

All data tables must be wrapped to prevent horizontal overflow on small screens:

<div className="overflow-x-auto">
  <table className="min-w-full ...">
    {/* table content */}
  </table>
</div>

Grids

All grid layouts should start from a single-column mobile base and expand upward:

// Correct — mobile-first
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  ...
</div>

// Avoid — no mobile base
<div className="grid grid-cols-3 gap-4">
  ...
</div>

Sidebar / Navigation

Replace the current hidden md:flex sidebar with a pattern that includes a mobile drawer (MOB-06):

// Target pattern after MOB-06
<aside className="hidden md:flex ...">
  {/* full sidebar for md+ */}
</aside>
<MobileNavDrawer className="flex md:hidden" />

Rollout Order

  1. MOB-06 — Implement mobile sidebar drawer (prerequisite)
  2. Audit and fix billing/page.tsx
  3. Audit and fix sanctions/page.tsx
  4. Audit and fix docs/page.tsx
  5. Audit and fix adverse-media/page.tsx

Each sub-page fix should be reviewed against the patterns above before merging.