Improving Mobile Readability of Quarterly Totals
Improving Mobile Readability of Quarterly Totals
Release: v1.0.125 Category: Responsive Design / Mobile UX
Overview
Starting in v1.0.125, the quarterly totals summary row in the QuarterCard component is now fully responsive on mobile devices. Previously, the three-column grid (typically showing income, expenses, and profit) was fixed at three columns regardless of screen width, making it cramped and hard to read on small phones.
What Was the Problem?
The QuarterCard component displayed its totals in a grid grid-cols-3 divide-x layout with no mobile-specific override. On a device like the iPhone SE (375px wide), this produced columns roughly 116px wide each — too narrow for the text-lg font-semibold value figures and text-xs descriptor labels to display comfortably side by side.
This affected landlords reviewing their quarterly tax summaries on mobile, which is a common use case when checking figures on the go before an HMRC Making Tax Digital submission.
What Changed?
The totals grid in src/app/dashboard/quarterly/quarterly-summary-dashboard.tsx now uses responsive Tailwind CSS utility classes:
| Breakpoint | Layout | Dividers |
|---|---|---|
Mobile (< sm, e.g. iPhone SE) | Single column, stacked vertically | Horizontal lines between rows (divide-y) |
Tablet & above (sm+, e.g. ≥ 640px) | Three columns, side by side | Vertical lines between columns (divide-x) |
Updated Classes
- class="grid grid-cols-3 divide-x"
+ class="grid grid-cols-1 sm:grid-cols-3 divide-y sm:divide-y-0 sm:divide-x"
How It Looks Now
On mobile (< sm):
┌─────────────────────────┐
│ Income │
│ £2,400.00 │
├─────────────────────────┤
│ Expenses │
│ £380.00 │
├─────────────────────────┤
│ Profit │
│ £2,020.00 │
└─────────────────────────┘
On tablet/desktop (sm+):
┌───────────┬─────────────┬───────────┐
│ Income │ Expenses │ Profit │
│ £2,400.00 │ £380.00 │ £2,020.00 │
└───────────┴─────────────┴───────────┘
Who Is Affected?
This change benefits all users who access the quarterly summary dashboard on a small-screen mobile device. No configuration or action is required — the layout update is applied automatically.