Fixing the AI Assessment Stats Bar on Mobile

Version: 0.1.274 · Ref: MOB-20

---

Background

The AI Deduction Assessment panel surfaces three key financial figures at a glance — Chargeable, Suggested total, and Applied — in a horizontal stats bar at the top of the panel. This bar was built with a hard-coded grid-cols-3 Tailwind class and consistent px-4 py-2.5 padding on every cell.

That works well on tablet and desktop. On a 375 px phone, however, each column collapses to roughly 80 px — not enough space for a currency label, a £ amount, and a status icon to sit comfortably side-by-side. The result was either overflowing text or truncated figures, both of which undermine the trust and clarity the assessment panel is designed to provide.

What we changed

The fix is deliberately conservative: we kept the three-column layout intact at every breakpoint (avoiding any layout reflow that could surprise existing users), and instead reduced the horizontal and vertical padding inside each cell on mobile:

<!-- Before -->
<div class="grid grid-cols-3 divide-x divide-border border-b border-border">
  <div class="px-4 py-2.5">…</div>
  …
</div>

<!-- After -->
<div class="grid grid-cols-3 divide-x divide-border border-b border-border">
  <div class="px-2 py-2 sm:px-4 sm:py-2.5">…</div>
  …
</div>

The responsive utility classes (sm:px-4 sm:py-2.5) restore the original spacing on viewports 640 px and wider, so the panel looks exactly the same on desktop and tablet.

Why padding rather than stacking?

An alternative approach — switching to grid-cols-1 sm:grid-cols-3 with divide-y sm:divide-y-0 sm:divide-x — would stack the three stats vertically on mobile. While this gives each stat the most room, it doubles the height of the panel, pushing the detailed deduction evidence further down the page and requiring more scrolling. Given that the primary mobile use case is a quick review of totals before tapping into detail, keeping all three figures visible at once is the better trade-off. The padding reduction achieves that.

Impact

• Users on 375 px devices (iPhone SE, many Android mid-range phones) will now see all three financial figures — complete labels and amounts — without overflow or truncation.
• No visual change on sm (640 px+) breakpoints.
• No behavioural change — the fix is purely presentational.

Files changed

File	Change
src/components/ai-assessment-panel.tsx	Added px-2 py-2 sm:px-4 sm:py-2.5 responsive padding to stats bar cells