Fixing Mobile Table Clipping in the People List (v0.1.3)

Release: v0.1.3 · Control: MOB-07 · Category: Layout

---

What Was the Problem?

On narrow mobile viewports, the People list table in the compliance dashboard could clip its visible columns — specifically the Name and Status columns that remain visible at all breakpoints.

The root cause was a single CSS class on the table's wrapper <div>. It was set to overflow-hidden, which tells the browser to cut off anything that extends beyond the container's boundary. While this is often intentional for design reasons (e.g. to honour a rounded border without content bleeding out), it has an undesirable side-effect for tables: on very narrow screens, rather than letting the user scroll sideways to see the full content, the browser simply hides whatever doesn't fit.

<!-- Before (clips content on narrow screens) -->
<div class="overflow-hidden rounded-xl border border-border">
  <table>…</table>
</div>

The table does use responsive column hiding (hidden md:table-cell, hidden sm:table-cell) to progressively remove less-critical columns as the screen narrows. However, this is not a complete solution — on very small screens the remaining columns can still overflow the container, and with overflow-hidden in place that overflow is silently clipped rather than made scrollable.

Interestingly, the lawful-basis table on the same page was already using the correct approach: overflow-x-auto.

---

What Changed?

The fix is a one-class swap on the People table wrapper:

<!-- After (allows horizontal scroll on narrow screens) -->
<div class="overflow-x-auto rounded-xl border border-border">
  <table>…</table>
</div>

overflow-x-auto instructs the browser to add a horizontal scrollbar only when the table content is wider than the container. On larger screens where the table fits comfortably, there is no scrollbar and the UI looks identical to before. On narrow screens, users can now scroll the table horizontally instead of having data silently cut off.

The rounded-xl border border-border classes are unchanged, so the visual border and corner rounding are fully preserved.

---

Tables Audited

As part of this fix, the following additional tables were audited for the same overflow-hidden pattern:

Page	File
Sanctions list	src/app/dashboard/sanctions/page.tsx
Sanctions changes	src/app/dashboard/sanctions/changes/page.tsx
Adverse media	src/app/dashboard/adverse-media/page.tsx

---

Impact

This fix affects mobile and tablet users accessing the People list on narrow viewports. Desktop users will see no change. The fix ensures that no screening data is silently hidden due to a layout constraint, which is especially important in a compliance context where missing information could affect decision-making.