Fixing the Analytics Dashboard KPI Grid: Wider Cards, Clearer Metrics
Fixing the Analytics Dashboard KPI Grid: Wider Cards, Clearer Metrics
Version: 0.1.146
Category: UI/UX · Layout
The problem
The analytics dashboard displays a row of KPI cards — each one summarising a key metric at a glance. Up until this release, the grid used the following Tailwind responsive classes:
sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6
On large breakpoints (≥1280px), that last class forced all six cards into a single row. On a typical 1440px wide monitor, each card ended up roughly 200px wide — not nearly enough room to legibly show:
- A
3xl-sized metric value (e.g.£18,420) - An accompanying icon
- A text label below the value
To make things worse, the cards had no defined minimum height, so they could collapse to as little as 96px tall when the grid squeezed them. The result was a row of cramped, hard-to-read tiles that defeated the purpose of a at-a-glance dashboard.
The fix
The xl:grid-cols-6 breakpoint override has been removed. The grid now caps at three columns across all wide viewports:
sm:grid-cols-2 lg:grid-cols-3
The six KPI cards now wrap naturally into two rows of three, giving each card roughly twice the horizontal space it had before. This is consistent with the OverviewStats component elsewhere in the dashboard, which already handles five cards gracefully using xl:grid-cols-5.
Before vs. after
| Before | After | |
|---|---|---|
| Columns at 1440px | 6 | 3 |
| Approx. card width | ~200px | ~440px |
| Min card height | ~96px (unconstrained) | Naturally taller |
| Metric legibility | Cramped | Comfortable |
| Layout rows | 1 | 2 |
Who is affected?
Anyone using the analytics dashboard on a desktop or wide laptop screen will see the improved layout immediately — no action required. The change is purely presentational; no data, APIs, or user settings are affected.
File changed
src/app/dashboard/analytics/analytics-dashboard.tsx