All Docs
FeaturesMaking Tax DigitalUpdated March 9, 2026

Mobile Fix: Responsive Dashboard Header Padding (MOB-02)

Mobile Fix: Responsive Dashboard Header Padding (MOB-02)

Version: 1.0.351
Control category: viewport_meta
Affected file: src/app/dashboard/dashboard-header.tsx

Overview

Prior to this release, the DashboardHeader component applied horizontal and vertical padding using hardcoded inline pixel values. This meant the padding could not adapt to the viewport width — a problem that was particularly visible on small-screen devices such as the iPhone SE (375 px).

What Was Wrong

Header element

// Before — fixed inline styles
<header style={{ paddingLeft: '32px', paddingRight: '32px' }}>

On a 375 px screen, 64 px of horizontal padding consumed roughly 17 % of the viewport, leaving only 311 px for header content (navigation links, user menu, etc.). Because this was an inline style, no breakpoint overrides could be applied.

Main content element

// Before — fixed inline styles
<main style={{ padding: '32px 32px calc(32px + env(safe-area-inset-bottom)) 32px' }}>

The same 32 px fixed value was used on all four sides regardless of screen size, and the env(safe-area-inset-bottom) calculation was buried inside an inline style that could not be modified by Tailwind utilities or media queries.

What Changed

Both inline style props have been removed and replaced with responsive Tailwind utility classes.

Header element

// After — responsive Tailwind classes
<header className="px-4 md:px-8">
BreakpointPadding (each side)
< 768 px (mobile)16 px (px-4)
≥ 768 px (tablet / desktop)32 px (md:px-8)

Main content element

// After — responsive Tailwind classes
<main className="p-4 md:p-8">
  {/* safe-area-inset-bottom handled via CSS variable or custom utility */}

The env(safe-area-inset-bottom) offset is now applied through a CSS variable or a custom Tailwind utility, keeping it out of the inline style and making it independently maintainable.

Impact

  • iPhone SE (375 px): Horizontal padding drops from 32 px to 16 px per side, recovering 32 px of usable header width.
  • Tablet and desktop: Padding remains at 32 px, matching the previous design.
  • Safe-area support: Devices with home-indicator notches (iPhone X and later) continue to receive correct bottom inset padding.
  • No visual regression expected on viewports ≥ 768 px.

Related