MOB-24: Dashboard Content Components — Responsive Breakpoint Audit

Release: v0.1.167 · Type: Testing / QA

Background

The platform's layout-level components have solid mobile coverage — CollapsibleSidebar, MobileNav, and MobileBottomTabs all use Tailwind responsive prefixes consistently. However, a structured audit under ticket MOB-24 revealed that the content components rendered inside the dashboard viewport receive almost no responsive treatment, meaning the UI is functionally identical whether viewed on a 375 px phone or a 1440 px desktop monitor.

This post documents the findings and the recommended Tailwind changes that will be implemented in the follow-up sprint.

What Was Audited

KpiSummaryStrip & KpiChip

File: src/app/dashboard/kpi-summary-strip.tsx

The KpiSummaryStrip wrapper correctly uses flex flex-wrap gap-2, so chips reflow when the container narrows. The problem is at the chip level: KpiChip is set to min-w-0, which allows the chip to shrink to essentially zero width on a narrow viewport, truncating or hiding its label and value entirely.

Recommendation:

// Before
<div className="min-w-0 ...">

// After
<div className="min-w-[120px] ...">

Setting min-w-[120px] gives each chip a guaranteed minimum footprint while still allowing the strip to wrap naturally across multiple lines when needed.

Work-Queue Cards (TenancyCard & ComplianceCard)

Action-button areas inside work-queue cards use a fixed horizontal layout. On viewports narrower than ~400 px, buttons can overflow the card boundary or be difficult to tap.

Recommendation:

// Before
<div className="flex gap-2">

// After
<div className="flex flex-col gap-2 sm:flex-row">

This stacks action buttons vertically on handset widths and returns them to the expected horizontal row at the sm breakpoint (640 px+).

Analytics Chart Grid (Rows 2 & 3)

The analytics section uses a two-column grid that only activates at the lg breakpoint:

// Current
<div className="grid gap-6 lg:grid-cols-2">

This means the grid is a single column from 0 px all the way up to 1023 px — which is technically functional but leaves a large dead zone in the md range (768–1023 px) where a two-column layout would already fit comfortably.

Recommendation:

// After
<div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">

Adding sm:grid-cols-1 makes the single-column intent explicit and self-documenting. Introducing md:grid-cols-2 allows the two-column layout to kick in at tablet widths, giving a more natural progression across device sizes.

Filter Toolbars

Filter toolbars across the dashboard currently render identically at all viewport widths. No reflow or stacking behaviour is defined. These will be reviewed as part of the follow-up implementation sprint to determine the appropriate breakpoint strategy (e.g. collapsing into a modal/drawer on mobile vs. a horizontal scroll).

Breakpoint Reference

All recommendations use standard Tailwind CSS v3 breakpoints:

Prefix	Min-width
`sm`	640 px
`md`	768 px
`lg`	1024 px
`xl`	1280 px

Next Steps

The findings from MOB-24 will be implemented in a dedicated sprint. No production code was changed in this release — only the audit results are documented here. Once the implementation PR lands, this page will be updated with the confirmed changes and any additional refinements discovered during development.