All Docs
FeaturesCalmony Sanctions MonitorUpdated March 11, 2026

Fix: Preventing Silent Content Loss on Mobile Tables

Fix: Preventing Silent Content Loss on Mobile Tables

Release: v0.1.17
Tracked issues: MOB-14, MOB-07

What Was the Problem?

On mobile devices — particularly those with a 375 px screen width such as the iPhone SE — the people table in the dashboard could silently clip content. The table wrapper was styled with overflow-hidden, which instructs the browser to discard anything that extends beyond the container's boundaries rather than making it scrollable.

While responsive column hiding already reduces the number of visible columns on smaller screens, there are cases where the checkbox column, the name column, and the status column are all required simultaneously. On a 375 px viewport these three columns may not comfortably fit within the available width. With overflow-hidden in place, the rightmost content would be cropped with no visual affordance and no way for the user to scroll to it.

This was first flagged as MOB-07 and independently re-identified as MOB-14.

What Changed

The overflow-hidden class on the table wrapper <div> in src/app/dashboard/people/page.tsx has been replaced with overflow-x-auto.

- <div class="... overflow-hidden ...">
+ <div class="... overflow-x-auto ...">

overflow-x-auto tells the browser to show a horizontal scrollbar (or enable touch-swipe scrolling on mobile) only when the content actually overflows — it has no visible effect on wider screens where all columns fit comfortably.

Impact

  • 375 px devices: Users can now horizontally scroll the people table when content exceeds the viewport width. No data is hidden or clipped.
  • Wider viewports: No change in behaviour — the table renders exactly as before.
  • MOB-07 resolved: This single fix closes both tracked issues since they shared the same root cause.

Related Pages to Audit

The same overflow-hidden pattern may exist in other dashboard table pages. The following files should be reviewed and updated to use overflow-x-auto for consistency:

  • src/app/dashboard/sanctions/page.tsx
  • src/app/dashboard/adverse-media/page.tsx

Testing on Mobile

To verify the fix on a real or simulated 375 px device:

  1. Open the People dashboard page.
  2. Ensure the checkbox, name, and status columns are visible.
  3. If content overflows, swipe horizontally — the table should scroll smoothly.
  4. Confirm no column data is clipped or hidden.

For browser-based testing, use Chrome DevTools device emulation set to iPhone SE (375 × 667).