Responsive Dashboard Layout

All dashboard sub-pages follow a mobile-first responsive design using Tailwind CSS breakpoints. This page documents the established patterns, per-page behaviour, and what to expect on different screen sizes.

Breakpoint Reference

Prefix	Min-width	Typical target
(none)	0 px	Mobile (default)
sm:	640 px	Large phones / small tablets
md:	768 px	Tablets
lg:	1024 px	Laptops / desktops

Established Patterns

All dashboard pages follow these conventions. When building a new page, apply these patterns from the start.

Filter pill rows

<div class="flex flex-wrap gap-1.5">
  <!-- filter pills -->
</div>

Pills wrap onto additional lines rather than overflowing the viewport.

Data tables

<div class="overflow-x-auto rounded-xl border border-border">
  <table class="w-full min-w-[Npx]">
    <!-- columns -->
  </table>
</div>

• overflow-x-auto on the wrapper enables horizontal scrolling.
• min-w-[Npx] on <table> ensures the scroll engages before columns are crushed. Choose a value based on your column count (e.g. 540px for ~5 columns).

Stat / summary card grids

<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
  <!-- cards -->
</div>

Single column on mobile, two columns on sm, four columns on lg.

Multi-action rows (buttons + inputs)

<div class="flex flex-col gap-3 sm:flex-row">
  <!-- inputs, buttons -->
</div>

Elements stack vertically on mobile and sit in a single row on sm+.

Text containers next to action buttons

<div class="min-w-0 truncate">
  <!-- text content -->
</div>

min-w-0 prevents the text from expanding its flex parent and pushing the button off-screen. Pair with truncate for single-line labels.

Icons inside flex rows

Always add shrink-0 to icon elements inside a flex container so they are never squashed when sibling content is long.

---

Page-by-Page Notes

People (/dashboard/people)

• Search input occupies a full-width row at all sizes.
• Status and risk-level filter selects sit on a second row and wrap onto further lines if needed.
• The table has min-w-[540px] — a horizontal scrollbar appears on screens narrower than this.
• The header "Add" button shows a shorter label on mobile and the full "Add New" label on sm+.

Sanctions Changes (/dashboard/sanctions/changes)

• Filter pills (All, Added, Amended, Removed) wrap when the viewport is narrow.
• Version header rows wrap so a long version string never pushes the date off-screen.

Settings (/dashboard/settings)

• API Keys section header: heading and Create Key button stack vertically on mobile.
• Create key form: name input and Create / Cancel buttons stack on mobile, inline on sm+.
• New-key reveal: the raw key value and Copy button stack on mobile, sit side-by-side on sm+.
• Key list items: long key names are truncated with truncate; the Revoke button always stays visible.
• Retention policy rows: labels and values wrap with gap-2 to prevent clipping.

Billing (/dashboard/billing)

Already compliant. Uses sm:grid-cols-2 lg:grid-cols-4 for stat cards and flex-col sm:flex-row for action rows.

Sanctions List (/dashboard/sanctions)

Already compliant. Table uses overflow-x-auto min-w-[560px]; layout uses flex-col sm:flex-row.

Docs (/dashboard/docs)

Already compliant. Table uses overflow-x-auto min-w-[480px]; grids use sm:grid-cols-2 and sm:grid-cols-3.

Adverse Media (/dashboard/adverse-media)

Already compliant. Cards use flex-col sm:flex-row; filter rows have flex-wrap.

Matches (/dashboard/matches)

Already compliant. Action buttons use flex flex-wrap; comparison layout uses md:grid-cols-2.