Fixing Mobile Dashboard Horizontal Overflow in v1.0.254

Background

The dashboard layout wrapper (src/app/dashboard/layout.tsx) used a single p-6 utility class on its <main> element, applying a uniform 24px padding on all four sides. This works well on tablet and desktop viewports, but creates a problem on smaller mobile screens.

The Problem

On a 375px-wide viewport — the width of an iPhone SE and a common baseline for mobile testing — a 24px left + 24px right padding leaves only 327px of usable content width.

375px viewport
  └─ 24px left padding
  └─ 327px content area   ← not enough
  └─ 24px right padding

Two dashboard components are particularly affected:

Overview stats grid — renders a multi-column flex/grid row that does not naturally collapse to a single column at this width.
Quarterly summary banner — contains a wide grid row that overflows its container.

Because there was no overflow-x-hidden guard on the <main> wrapper, these overflowing elements created a horizontal scrollbar and broke the overall page layout on mobile devices.

The Fix

Two changes were made to src/app/dashboard/layout.tsx:

1. Responsive Padding

- <main className="flex-1 p-6">
+ <main className="flex-1 p-4 md:p-6 overflow-x-hidden">

The p-6 class is replaced with p-4 md:p-6:

Breakpoint	Padding	Content width at 375px
Mobile (default)	16px	343px
`md` and above	24px	Unchanged

This gives child components an additional 16px of horizontal breathing room on mobile without affecting the desktop layout.

2. Overflow Guard

overflow-x-hidden is added to the <main> element. Even if a child component introduces content wider than the viewport in future, this prevents a horizontal scrollbar from appearing and breaking the layout.

Impact

Mobile users will see the dashboard content correctly contained within the viewport on 375px devices.
Desktop and tablet users are unaffected — md:p-6 preserves the original 24px padding at the md breakpoint and above.
No API changes, data changes, or configuration updates are required.

Testing

To verify the fix, test the dashboard at the following viewport widths:

Viewport	Expected padding	Expected overflow
375px (iPhone SE)	16px	None
390px (iPhone 14)	16px	None
768px (iPad, `md`)	24px	None
1280px (Desktop)	24px	None

Pay particular attention to the overview stats grid and quarterly summary banner at 375px — both should render fully within the viewport without triggering a horizontal scrollbar.