Fixing Horizontal Scroll on the Analytics Dashboard (MOB-14)

Release: v0.1.166 · Category: Mobile / Touch Interaction

---

Background

When we audited the analytics dashboard on 375 px viewports (iPhone SE and equivalents), we found several places where content quietly escaped the viewport and triggered horizontal scrolling. Horizontal scroll on a data dashboard is disorienting — users can miss key information and the page feels broken. MOB-14 tracks the full investigation and fix.

---

What Was Overflowing, and Why

1. The Range Filter Toolbar

The dashboard exposes six preset time-range buttons (e.g. Last 7 days, Last 30 days, Custom…). These lived in a single flex flex-wrap row. On a 375 px screen, the flex container attempted to fit all six buttons before wrapping, producing a brief overflow flash before the layout reflowed.

Fix: The toolbar is now grid grid-cols-3 sm:flex. On mobile it renders as a clean two-column, three-row grid; on sm: and above it falls back to the original single-row flex layout.

2. SimpleBarChart Right-Side Labels

Recharts' <BarChart> was configured with margin={{ right: 64 }} to make room for bar-end labels. On narrow viewports the SVG's effective drawing area was already at its minimum, so those 64 px of right margin pushed label text outside the SVG bounds and beyond the screen edge.

Fix: The right margin is now responsive — reduced on mobile breakpoints so labels remain inside the SVG viewport.

3. CustomRangePicker Date Inputs

The custom date-range picker placed its From and To inputs side-by-side using flex flex-row. At 375 px both inputs share ~160 px each, which is too narrow for usable date entry and causes the second input to clip.

Fix: The picker now uses flex flex-col sm:flex-row items-start sm:items-center gap-2. On mobile the inputs stack vertically; on sm: and above they return to a single row.

4. Missing Global Overflow Guard

None of the three fixes above would prevent a future regression where a new widget inadvertently overflows. A overflow-x-hidden class has been added to the analytics page root <div> as a defensive safety net.

---

Changes at a Glance

Area	Before	After
Range filter toolbar	flex flex-wrap (6 buttons, single row)	grid grid-cols-3 sm:flex
Bar chart margins	margin={{ right: 64 }} (fixed)	Responsive right margin
Date range picker	flex flex-row (always side-by-side)	flex flex-col sm:flex-row
Page root	No overflow guard	overflow-x-hidden

---

Who Is Affected

Only users viewing the analytics dashboard on viewports ≤ 374 px wide. Tablet and desktop layouts are completely unchanged. No API calls, data models, or server-side logic were modified.

---

Testing

To verify the fix manually:

1. Open the analytics dashboard in Chrome DevTools.
2. Set the device to iPhone SE (375 × 667 px) or use a custom 375 px width.
3. Confirm there is no horizontal scrollbar and no content clips outside the viewport.
4. Toggle between all six range-filter presets and the Custom date picker — layout should remain contained.
5. Resize to sm: (640 px) and confirm the single-row toolbar and side-by-side date inputs return.