All Docs
FeaturesDepositClearUpdated March 12, 2026

MOB-07: Mobile Table Responsiveness — What We Found and How We're Fixing It

MOB-07: Mobile Table Responsiveness — What We Found and How We're Fixing It

Release: v0.1.205
Category: Layout / Mobile

Background

As part of our ongoing mobile quality programme, every view in the platform is audited against a 375 px viewport — the minimum target width for modern smartphones. Control MOB-07 specifically checks that all data tables and grid-based tabular layouts are wrapped in a horizontal scroll container so they never overflow the screen on small devices.

What the Audit Found

No shadcn Table component is in use

The src/components/ui/ directory currently contains only optimized-image.tsx. Because the shadcn Table component (which ships with a built-in overflow-x-auto wrapper) has not been adopted, any tabular data in the application relies entirely on hand-written markup — and the presence of scroll containers in that markup has not been confirmed.

At-risk pages

The following data-heavy pages were identified as potentially lacking horizontal scroll wrappers:

  • Tenancies — typically renders rows of tenancy records with multiple columns
  • Properties — lists property entries with associated metadata columns
  • Check-in / Check-out reports — report views with date, status, and action columns
  • Deductions — itemised deduction breakdowns
  • Compliance — compliance status tables across multiple tenancies

On a 375 px device, any of these pages that use a raw <table> element without a containing scroll <div> will overflow horizontally, cutting off content and making the page unusable.

Recommended Fix

Three valid remediation paths have been identified. The right choice will depend on the page in question and the broader design direction.

Option 1 — Wrap with overflow-x-auto (quickest)

<div className="overflow-x-auto">
  <table>
    {/* ... */}
  </table>
</div>

This is the lowest-effort fix and is appropriate as a short-term patch on any page that already has a well-structured table.

Option 2 — Adopt the shadcn Table component

The shadcn Table component wraps its content in a scroll container by default. Replacing hand-written tables with this component ensures consistent mobile behaviour across the product and aligns with the existing shadcn UI system.

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Property</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>12 Oak Street</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>

Option 3 — Card-based layout

For pages where the data can reasonably be presented as individual cards (one record per card), the card-based pattern already used in work-queue.tsx is the most mobile-friendly approach. It eliminates horizontal overflow entirely and is consistent with how the work queue already renders on small screens.

Status

PageStatus
Tenancies⚠️ Needs audit
Properties⚠️ Needs audit
Check-in / Check-out reports⚠️ Needs audit
Deductions⚠️ Needs audit
Compliance⚠️ Needs audit

Remediation for each page will be tracked against the MOB-07 control. This page will be updated as fixes are confirmed.

Related