Foundation
Responsive design
Instant Strata is desktop-first. Dashboards, portfolio tables, and manager workflows are designed for detail on large screens. That does not mean mobile is an afterthought: strata managers check inboxes, approve items, and look up scheme details on their phones throughout the day.
The goal is not to shrink the desktop UI. It is to make deliberate choices about what stays visible, what moves behind a tap, and what waits for a larger viewport.
Philosophy
Desktop-first
Optimise for managers at a desk: wide tables, multi-column dashboards, full metadata, keyboard and pointer precision.
Mobile-aware
Every application flow must work on a phone: check a task, find a scheme, read a notification. No horizontal scroll on primary paths.
Progressive detail
Add columns, badges, and side panels as viewport width increases. Hide with CSS breakpoints, not separate pages.
- Do not treat mobile as a separate product. Use the same components with layout variants and responsive visibility.
- Prefer list and compact layouts on narrow viewports. Reserve wide and card grid layouts for md and lg breakpoints.
- If a row needs more than three visible data points on mobile, move the rest to detail view or hide below sm/md.
- Touch targets stay at least 44px on interactive rows and buttons, even when visual density is tight.
- Marketing pages may stack earlier (md). Application tables hold structure longer and drop columns progressively.
Breakpoints
Tailwind defaults. The application treats md (768px) as the primary mobile boundary via useIsMobile.
sm640px+Large phone landscape, small tablet. Secondary metadata can appear.
md768px+Primary mobile/desktop boundary. Sidebar sheet vs fixed rail. Site header desktop nav.
lg1024px+Dashboard multi-column grids, wide table layouts, bento and feature splits.
xl1280px+Full portfolio dashboards with side panels and three-column widget grids.
Examples
Drag the interactive viewport below to watch Tailwind breakpoints apply in real time. Static pairs underneath show mobile (375px) and desktop (960px) layouts side by side using layout variants.
Interactive viewport
Drag the handle to resize. Breakpoints follow the viewport panel width inside the iframe.
Drag to resize viewport
Iframe isolates CSS breakpoints from your browser window.
Content renders inside an iframe so sm:, md:, and lg: utilities follow the panel width, like a browser window. Hooks that read window.innerWidth (useIsMobile) still use your actual browser size.
AGM statutory deadline passed without notice issued
Northbridge Estate · SP 2204 · Meetings · Jane Smith
Generate AGM notice pack
Harbour View Towers · SP 1042 · Meetings · Jane Smith
1 missing item
Sync levy schedule to trust accounting
Parkside Residences · SP 8871 · Accounting · Jane Smith
Action required: workflow step failed
Mobile uses layout="compact": title, badges, chevron only. Desktop uses layout="list" with trailing due date, assignee, and automation metadata.
Mobile: list rows with name, health, and chevron. Plan badge appears from sm in live UI; desktop wide rows add column headings, SP number, lot count, manager, and status.
Needs attention
12
3 today
Levy arrears
$84.2k
4%across 37 lots
Statutory deadlines
5
1 overdue · 30 days
Open maintenance
16
2 emergency
Needs attention
12
3 today
Levy arrears
$84.2k
4%across 37 lots
Statutory deadlines
5
1 overdue · 30 days
Open maintenance
16
2 emergency
Mobile stacks KPI tiles in a single column. Desktop shows four across. In production, StatGroup uses sm:grid-cols-2 and lg:grid-cols-4 at the viewport breakpoint.
Task inbox
12 open tasks
AGM statutory deadline passed without notice issued
Northbridge Estate · SP 2204 · Meetings
Generate AGM notice pack
Harbour View Towers · SP 1042 · Meetings
Upcoming deadlines
AGM notice period
Harbour View · 14 days
Task inbox
12 open tasks
AGM statutory deadline passed without notice issued
Northbridge Estate · SP 2204 · Meetings · Jane Smith
Generate AGM notice pack
Harbour View Towers · SP 1042 · Meetings · Jane Smith
1 missing item
Sync levy schedule to trust accounting
Parkside Residences · SP 8871 · Accounting · Jane Smith
Action required: workflow step failed
Upcoming deadlines3
AGM notice period
Harbour View · 14 days
Levy notice run
Parkside · 3 days
Mobile stacks the inbox and deadlines widget vertically. Desktop places the widget beside a wider inbox panel using a two-column grid.
For strata managers
Everything in one place
Levies, compliance, and correspondence in a single inbox.
For strata managers
Everything in one place
Levies, compliance, correspondence, and owner requests. One inbox, one roll, one source of truth for every scheme you manage.
Website surfaces stack copy and actions on mobile. Desktop uses a two-column grid with the visual beside the text column.
Application
Manager and owner product UI. Navigation collapses to a sheet; dashboards stack; table rows shed columns before they shed meaning.
App shell / Sidebar
Mobile / tablet
Slide-in sheet. Icon-only collapse optional on tablet.
Desktop
Fixed 240px sidebar with full labels and flyout panels.
Sidebar + useIsMobile (768px)Dashboard grids
Mobile / tablet
Single column. Stack widgets vertically.
Desktop
2–3 columns with lg:col-span-* for main + side panels.
WidgetGrid · gap-4Identity rows (scheme, lot, owner, task)
Mobile / tablet
list or compact layout. Title, primary badge, chevron.
Desktop
wide layout with column headings and full metadata.
layout="list" | layout="wide"Table metadata columns
Mobile / tablet
Hide non-essential columns. Keep identifier + status.
Desktop
Show entitlement, dates, assignee, secondary badges.
hidden sm:block · hidden md:inline-flexForms
Mobile / tablet
Single column field stack.
Desktop
Two-column grid from md where fields are short pairs.
grid md:grid-cols-2Content priority
When space is tight, cut in this order: secondary metadata, then decorative badges, then column headings. Never hide the primary identifier, status, or the action that unblocks the user.
WorkItem (inbox row)
Always
Priority bar, title, primary status badge
From sm
Trailing badges, due date emphasis
From md
Assignee avatar, automation badge, secondary meta
Desktop only
Full missing-items block (tap through to detail)
SchemeCard (list)
Always
Scheme name, health indicator
From sm
SP plan badge
From md
Status badge, lot count metadata
Desktop only
Portfolio stat columns (card/wide layouts only)
Document (wide row)
Always
Name, type icon
From sm
File size column
From md
Modified date, owner column
Desktop only
Wide column headings on list-only mobile views
SchemeContextBar
Always
Scheme name, plan, back navigation
From sm
Location line
From md
Full metadata strip, secondary actions
Desktop only
Inline portfolio stats
Website
Marketing surfaces stack naturally on mobile. Whitespace compresses but section rhythm stays intact. See Section and Spacing for gutter and vertical padding tokens.
Site header
Mobile / tablet
Hamburger menu, stacked nav links, full-width CTAs.
Desktop
Horizontal nav with dropdown panels.
hidden md:flex · md:hiddenHero
Mobile / tablet
Stacked headline, subcopy, actions. Visual below copy.
Desktop
12-column grid with text left, visual right.
flex flex-col md:gridFeature / marketing grids
Mobile / tablet
Single column, gap-4.
Desktop
2–3 columns, gap-8 to gap-16 between columns.
grid md:grid-cols-2 lg:grid-cols-3Section gutter
Mobile / tablet
px-6 (24px)
Desktop
md:px-12 (48px)
ContainerImplementation
Responsive visibility
className="hidden sm:inline-flex"
className="max-md:hidden"
className="md:hidden"
Layout prop over duplicate components
Choose the layout variant in the consuming page based on breakpoint, or use a single list layout with responsive column visibility inside wide rows.
<SchemeCard layout="list" scheme={scheme} />
<SchemeList showHeadings>
<SchemeCard layout="wide" ... />
</SchemeList>
ResizableViewport (docs)
Use ResizableViewport from @/components/docs/resizable-viewport in documentation previews. It composes ResizablePanelGroup with an iframe so CSS media queries match the dragged width. Preset buttons jump to 375, 640, 768, 1024, and 1280 pixels.
useIsMobile hook
For behaviour that CSS cannot handle (sheet vs rail, conditional render), use useIsMobile() from @/hooks/use-mobile. Threshold: 768px (md). Default SSR snapshot is desktop (false).
Review checklist
- Primary task completable on a 375px-wide viewport without horizontal scroll.
- Sidebar navigation reachable on mobile via sheet or equivalent.
- Row tap targets at least 44px tall for list and inbox items.
- Status and identifier visible without expanding a row on mobile.
- Wide table layouts only used where viewport has room for column headings.
- Desktop dashboard shows strictly more information than mobile, not different information.
- Forms stack to one column; paired short fields may sit side-by-side from md.
- Notifications and toasts readable at full width on small screens.