Fixing the Compliance Dashboard Scroll-Within-Scroll Anti-Pattern
Fixing the Compliance Dashboard Scroll-Within-Scroll Anti-Pattern
Version: 0.1.125
Affects: Compliance Dashboard → Open Issues Panel
The Problem
The Open Issues Panel on the Compliance Dashboard was constraining its issue card list inside a max-h-[600px] overflow-y-auto container. On the surface this seemed like a reasonable way to keep the panel compact — but it introduced a well-known UX anti-pattern: scroll within scroll.
When a user scrolls down the compliance dashboard page and reaches the Open Issues Panel, they would encounter a second, independent scroll area embedded within the first. This is disorienting for all users and particularly problematic on trackpads, where scroll momentum makes it easy to accidentally get "trapped" inside the inner scroll container.
To make things worse, the 'Show N more issues' button was positioned outside and below the scrollable container — meaning users had no clear signal that more items existed inside the scroll area, and the button felt visually detached from the content it controlled.
Who Was Affected
This issue had the greatest impact on agencies with a high volume of open compliance issues. A large number of issue cards would fill the 600 px container quickly, pushing critical items below the fold of the inner scroll — potentially obscuring compliance risks that require immediate attention.
The Fix
The max-h-[600px] overflow-y-auto wrapper has been removed from the issue card list inside OpenIssuesPanel. Issue cards now render inline and expand naturally within the normal page flow.
The existing 'Show N more / Collapse' toggle — which limits the initial view to the first 5 issues (ABOVE_FOLD_COUNT = 5) — is sufficient for progressive disclosure. This mechanism:
- Keeps the panel compact by default, showing only the top 5 issues.
- Offers a clearly labelled button to reveal additional issues inline.
- Collapses back cleanly without any scroll state to manage.
No inner scroll container is needed, and none will be reintroduced. If the compliance page grows too long in future, the correct solution is page-level pagination or infinite scroll, not a scrollable div nested inside the page.
Before & After
| Before (≤ v0.1.124) | After (v0.1.125+) | |
|---|---|---|
| Issue list container | max-h-[600px] overflow-y-auto | No height constraint; natural page flow |
| 'Show N more' button | Below the scroll container | Inline, part of the normal card list |
| Scroll behaviour | Two independent scroll areas | Single page scroll |
| Trackpad experience | Scroll trapping risk | Smooth, uninterrupted |
| Critical issue visibility | May be clipped inside inner scroll | Always visible within page scroll |
Guidance for Developers
If you are extending the Open Issues Panel or building similar list components in the compliance dashboard:
- Do not wrap card lists in height-constrained
overflow-y-autocontainers inside a scrollable page. - Do use the
ABOVE_FOLD_COUNTtoggle pattern for progressive disclosure of long lists. - Do reach for page-level pagination or route-based filtering when a list grows beyond what progressive disclosure can reasonably handle.