Fixing Silent Content Clipping on the People Table

Version: v0.1.32 | Control: MOB-25

What Was the Problem?

The people list table in the dashboard (/dashboard/people) used overflow-hidden on its wrapper element. On the surface this looked fine — progressive column hiding meant most viewport sizes never triggered an overflow condition. However, overflow-hidden is the wrong tool for a data table: when content did exceed the wrapper width, it was silently clipped with no indication to the user and no way to scroll to the hidden content.

This affected three tracked issues:

• MOB-07 — Content clipping on the people list table
• MOB-14 — Silent truncation related to table overflow behaviour
• MOB-25 — Table wrapper overflow-hidden causing silent content clipping

What Changed?

A single CSS utility class was updated on the people table wrapper in src/app/dashboard/people/page.tsx:

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

overflow-x-auto allows the browser to introduce a horizontal scrollbar only when the table content genuinely overflows — leaving the layout unchanged in normal conditions while ensuring no data is ever silently hidden on smaller screens or constrained viewports.

Why This Matters for Compliance Teams

The people table is a primary surface for reviewing screened individuals against the OFSI consolidated list. Silent content clipping on this table is a compliance risk: columns containing match scores, designation details, or status indicators could be invisibly truncated, leading users to act on an incomplete view of the data. Correct overflow handling ensures every column is always reachable.

Impact

• No visual change on standard desktop viewports
• Horizontal scroll now appears on narrow viewports or zoomed-in displays if table content exceeds the wrapper width
• Resolves MOB-07, MOB-14, and MOB-25 in a single change