All Docs
FeaturesCalmony Sanctions MonitorUpdated March 11, 2026

Fixing Silent Content Loss on Mobile Tables

Fixing Silent Content Loss on Mobile Tables

Release: v0.1.20 · Control: MOB-14 · Category: Touch Interaction

The Problem

On narrow mobile screens — particularly at the common 375 px breakpoint — the people table in the dashboard could silently clip content. The root cause was a single CSS class: overflow-hidden on the table wrapper <div>.

With responsive column hiding in place, this issue is largely avoided on wider viewports. But at 375 px, when the checkbox, name, and status columns are all visible simultaneously, the available horizontal space can be exhausted. Because overflow-hidden was set, any content that spilled beyond the container edge was clipped without any visual indication — users could not scroll to see it, and there was no indication that content was missing.

This is a particularly serious problem in a sanctions screening context, where missing a status indicator or a partially visible name could have compliance implications.

The Fix

The change is minimal but impactful:

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

Replacing overflow-hidden with overflow-x-auto on the people table wrapper means that, should content exceed the container width, a horizontal scrollbar is presented rather than content being clipped. Responsive column hiding still reduces the likelihood of overflow on most devices, but the scrollbar now acts as a safe fallback.

File changed: src/app/dashboard/people/page.tsx

Why This Matters

Behaviouroverflow-hiddenoverflow-x-auto
Content fits in viewport✅ No scrollbar, clean UI✅ No scrollbar, clean UI
Content overflows viewport❌ Content silently clipped✅ Horizontal scroll offered
User awareness of hidden content❌ None✅ Scrollbar indicates more content

Related Issues

  • MOB-07 — Previously reported overflow issue on the same people table. This fix resolves both MOB-14 and MOB-07 simultaneously.

What to Watch

Other dashboard table pages use similar markup patterns. The following files should be reviewed for the same overflow-hidden issue:

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

If either file uses overflow-hidden on a table wrapper, the same replacement (overflow-x-auto) should be applied.