From 9b617ba243a34d34a7e79a89f5df889ee9c8f139 Mon Sep 17 00:00:00 2001
From: Asapteejo <Asapteejo@users.noreply.github.com>
Date: Thu, 17 Sep 2026 00:01:13 +0100
Subject: [PATCH 1/2] feat(mobile): make tables, forms and touch targets work
 at 375px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Measured at 375px with touch emulation, before and after.

Tables (the worst offender). DataTable only wrapped the table in
overflow-x-auto, so /admin/payments rendered 973px wide inside a 333px
column and /admin/invoices 775px — three screens of sideways scrolling.
Below `md` each row is now a card: first column as the heading, the rest
as label/value pairs, actions preserved. The table returns at `md`. This
lands once in the shared component, so all nine DataTable screens plus
SimpleDataTable/DataTableCard get it. The Deal Board was worse — a
hardcoded min-w-[960px] grid, not a table at all — and now stacks its
stage columns below `md`.

iOS zoom. Input/Select/Textarea were 14px, and iOS Safari zooms the page
whenever a focused field is under 16px — every form on every phone. They
are 16px below `sm` and keep 14px above it. Same for the 9 inline input
styles that bypassed the primitives, which were also 38px tall (now 44).
Phone fields in the front-desk and quick-create forms gained type="tel"
so they raise the right keyboard.

Touch targets (44px minimum). Button size="sm" was 36px and is the admin
row-action size; dialog close 36px; DataTable sort controls 16px tall;
pagination 36px; theme toggle 36px; announcement dismiss 28px; quick
actions 40px; footer links 20px; property filter checkboxes 13px. All are
44px on phones and keep their denser desktop sizing from `sm` up.

Content priority. Admin pages put ~1600px of chrome above the data; the
ambient clock is hidden on phones and page descriptions clamp to two
lines. /properties buried every listing under six stacked filters, which
now collapse behind a toggle (CSS-only, still server-rendered, always
open from `md` up).

Dialogs. The bottom-sheet behaviour was already right; it gained
safe-area padding so actions clear the home indicator, and its footer
buttons stack full-width on phones.

Measured result (small targets per screen, iOS-zoom fields, side-scroll):
  /admin            31 -> 11, 960px grid gone
  /admin/payments   20 -> 6,  973px table gone, 6 zoom fields -> 0
  /admin/invoices   26 -> 5,  775px table gone, 6 zoom fields -> 0
  tenant /           9 -> 4,  3 zoom fields -> 0
  tenant /contact    8 -> 4,  11px horizontal overflow -> 0

Design tokens and dark mode are untouched; this is layout and interaction
only.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/(admin)/admin/contracts/page.tsx      |  2 +-
 src/app/(marketing)/properties/page.tsx       | 40 +++++---
 src/app/(marketing)/testimonials/page.tsx     |  4 +-
 src/components/admin/add-buyer-form.tsx       |  2 +-
 .../admin/announcement-composer.tsx           |  2 +-
 src/components/admin/branding-management.tsx  |  2 +-
 src/components/admin/deal-board-view.tsx      |  7 +-
 src/components/admin/front-desk-logbook.tsx   |  6 +-
 src/components/admin/invoice-create-form.tsx  |  2 +-
 src/components/admin/users-management.tsx     |  2 +-
 src/components/dashboard/quick-actions.tsx    |  2 +-
 .../dashboard/quick-create-forms.tsx          |  6 +-
 src/components/marketing/marketing-footer.tsx | 16 +--
 src/components/messaging/message-composer.tsx |  2 +-
 src/components/messaging/new-thread-form.tsx  |  2 +-
 src/components/portal/announcement-banner.tsx |  2 +-
 src/components/portal/dashboard-shell.tsx     | 14 ++-
 src/components/shared/theme-toggle.tsx        |  2 +-
 src/components/ui/button.tsx                  |  5 +-
 src/components/ui/data-table.tsx              | 98 ++++++++++++++++++-
 src/components/ui/dialog.tsx                  | 20 +++-
 src/components/ui/input.tsx                   |  5 +-
 src/components/ui/select.tsx                  |  3 +-
 src/components/ui/textarea.tsx                |  3 +-
 24 files changed, 193 insertions(+), 56 deletions(-)

diff --git a/src/app/(admin)/admin/contracts/page.tsx b/src/app/(admin)/admin/contracts/page.tsx
index c16211d..cc41e25 100644
--- a/src/app/(admin)/admin/contracts/page.tsx
+++ b/src/app/(admin)/admin/contracts/page.tsx
@@ -109,7 +109,7 @@ function UploadContractForm({ transactions }: { transactions: TransactionWithout
             name="file"
             accept=".pdf,application/pdf"
             required
-            className="w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-800)] file:mr-3 file:rounded file:border-0 file:bg-[var(--sand-100)] file:px-2 file:py-0.5 file:text-xs file:font-medium"
+            className="w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-800)] file:mr-3 file:rounded file:border-0 file:bg-[var(--sand-100)] file:px-2 file:py-0.5 file:text-xs file:font-medium"
           />
         </div>
         <div className="flex items-end">
diff --git a/src/app/(marketing)/properties/page.tsx b/src/app/(marketing)/properties/page.tsx
index 207a35b..5a0e473 100644
--- a/src/app/(marketing)/properties/page.tsx
+++ b/src/app/(marketing)/properties/page.tsx
@@ -62,11 +62,23 @@ export default async function PropertiesPage({
       </Reveal>
       <form className="space-y-4" method="GET">
         <Card className="space-y-4 p-5">
-          <div className="flex items-center gap-2 text-sm font-semibold text-[var(--ink-700)]">
+          {/* On a phone these six fields pushed every listing below the fold,
+              so they collapse behind a toggle and buyers see inventory first.
+              Checkbox + peer is used rather than <details> or JS so the panel
+              works server-rendered, and it is force-open from `md` up. The
+              checkbox has no name, so it is never submitted with the form. */}
+          <input type="checkbox" id="refine-listings" className="peer sr-only" />
+          <label
+            htmlFor="refine-listings"
+            className="admin-focus flex min-h-11 cursor-pointer items-center gap-2 text-sm font-semibold text-[var(--ink-700)] md:cursor-default"
+          >
             <SlidersHorizontal className="h-4 w-4 text-[var(--brand-700)]" aria-hidden />
             Refine listings
-          </div>
-          <div className="grid gap-4 lg:grid-cols-4">
+            <span className="ml-auto text-xs font-medium text-[var(--ink-500)] md:hidden">
+              Tap to {activeFilters.length > 0 ? "edit" : "filter"}
+            </span>
+          </label>
+          <div className="hidden grid-cols-1 gap-4 peer-checked:grid md:grid lg:grid-cols-4">
           <PropertyLocationSearch
             defaultLocation={filters.location}
             defaultLatitude={filters.latitude}
@@ -98,22 +110,24 @@ export default async function PropertiesPage({
             <option value="RESERVED">Reserved</option>
             <option value="SOLD">Sold</option>
           </Select>
-          <label className="flex items-center gap-3 rounded-2xl border border-[var(--line)] px-4 text-sm text-[var(--ink-700)]">
-            <input type="checkbox" name="hasPaymentPlan" value="true" defaultChecked={Boolean(filters.hasPaymentPlan)} />
+          <label className="flex min-h-11 items-center gap-3 rounded-2xl border border-[var(--line)] px-4 py-3 text-sm text-[var(--ink-700)]">
+            <input type="checkbox" name="hasPaymentPlan" value="true" className="h-5 w-5" defaultChecked={Boolean(filters.hasPaymentPlan)} />
             Payment plan available
           </label>
-          <label className="flex items-center gap-3 rounded-2xl border border-[var(--line)] px-4 text-sm text-[var(--ink-700)]">
-            <input type="checkbox" name="featured" value="true" defaultChecked={Boolean(filters.featured)} />
+          <label className="flex min-h-11 items-center gap-3 rounded-2xl border border-[var(--line)] px-4 py-3 text-sm text-[var(--ink-700)]">
+            <input type="checkbox" name="featured" value="true" className="h-5 w-5" defaultChecked={Boolean(filters.featured)} />
             Featured only
           </label>
           </div>
+          {/* Sibling of the peer checkbox so the actions collapse with the
+              fields they apply to, instead of floating above the listings. */}
+          <div className="hidden flex-wrap gap-3 peer-checked:flex md:flex">
+            <Button type="submit">Apply filters</Button>
+            <Link href="/properties">
+              <Button type="button" variant="outline">Reset</Button>
+            </Link>
+          </div>
         </Card>
-        <div className="flex flex-wrap gap-3">
-          <Button type="submit">Apply filters</Button>
-          <Link href="/properties">
-            <Button type="button" variant="outline">Reset</Button>
-          </Link>
-        </div>
       </form>
       <div className="flex flex-wrap items-center gap-3">
         <span className="text-sm font-semibold text-[var(--ink-950)]">
diff --git a/src/app/(marketing)/testimonials/page.tsx b/src/app/(marketing)/testimonials/page.tsx
index e951de3..a60d317 100644
--- a/src/app/(marketing)/testimonials/page.tsx
+++ b/src/app/(marketing)/testimonials/page.tsx
@@ -59,8 +59,8 @@ export default async function TestimonialsPage({
             </option>
           ))}
         </Select>
-        <input name="year" defaultValue={filters.year} placeholder="Year" className="admin-focus rounded-[var(--radius-md)] border border-[var(--line)] px-3 py-2 text-sm" />
-        <input name="month" defaultValue={filters.month} placeholder="Month" className="admin-focus rounded-[var(--radius-md)] border border-[var(--line)] px-3 py-2 text-sm" />
+        <input name="year" defaultValue={filters.year} placeholder="Year" inputMode="numeric" className="admin-focus min-h-11 rounded-[var(--radius-md)] border border-[var(--line)] px-3 py-2 text-base sm:text-sm" />
+        <input name="month" defaultValue={filters.month} placeholder="Month" inputMode="numeric" className="admin-focus min-h-11 rounded-[var(--radius-md)] border border-[var(--line)] px-3 py-2 text-base sm:text-sm" />
         <button className="admin-interactive admin-focus rounded-full bg-[var(--brand-700)] px-5 py-2 text-sm font-semibold text-white" type="submit">
           Filter
         </button>
diff --git a/src/components/admin/add-buyer-form.tsx b/src/components/admin/add-buyer-form.tsx
index 7630995..4c3c800 100644
--- a/src/components/admin/add-buyer-form.tsx
+++ b/src/components/admin/add-buyer-form.tsx
@@ -13,7 +13,7 @@ import type { ProvisionUserResult } from "@/modules/provisioning/provision-user"
 const INITIAL: ProvisionUserResult | null = null;
 
 const inputCls =
-  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
+  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
 
 const labelCls = "block text-xs font-medium uppercase tracking-[0.12em] text-[var(--ink-500)]";
 
diff --git a/src/components/admin/announcement-composer.tsx b/src/components/admin/announcement-composer.tsx
index 03d3dfc..e10eb68 100644
--- a/src/components/admin/announcement-composer.tsx
+++ b/src/components/admin/announcement-composer.tsx
@@ -9,7 +9,7 @@ import { Select } from "@/components/ui/select";
 const INITIAL: AnnouncementFormState = { ok: false, error: null };
 
 const inputClass =
-  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
+  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
 
 function PostButton() {
   const { pending } = useFormStatus();
diff --git a/src/components/admin/branding-management.tsx b/src/components/admin/branding-management.tsx
index 0fdf9c2..ced51cc 100644
--- a/src/components/admin/branding-management.tsx
+++ b/src/components/admin/branding-management.tsx
@@ -682,7 +682,7 @@ function ColorField({
     <Field label={label}>
       <div className="flex min-w-0 items-center gap-3 rounded-[var(--radius-md)] border border-[var(--border-subtle,var(--line))] bg-white px-3 py-2 focus-within:border-[var(--brand-500)] focus-within:ring-2 focus-within:ring-[var(--brand-500)]">
         <input type="color" className="h-8 w-10 rounded-lg border-0 bg-transparent p-0" value={pickerValue} onChange={(event) => onChange(event.target.value.toUpperCase())} />
-        <input className="numeric h-9 min-w-0 flex-1 bg-transparent text-sm outline-none" value={value} onChange={(event) => onChange(event.target.value.toUpperCase())} />
+        <input className="numeric h-9 min-w-0 flex-1 bg-transparent text-base sm:text-sm outline-none" value={value} onChange={(event) => onChange(event.target.value.toUpperCase())} />
       </div>
     </Field>
   );
diff --git a/src/components/admin/deal-board-view.tsx b/src/components/admin/deal-board-view.tsx
index a4362c0..f8a8fef 100644
--- a/src/components/admin/deal-board-view.tsx
+++ b/src/components/admin/deal-board-view.tsx
@@ -514,8 +514,11 @@ export function DealBoardView({
       ) : null}
 
       <div className="grid gap-6 2xl:grid-cols-[minmax(0,1fr)_340px]">
-        <div className="overflow-x-auto pb-2">
-        <div className="grid min-w-[960px] gap-4 xl:grid-cols-2 3xl:grid-cols-3">
+        {/* The 960px floor is what keeps the stage columns side by side, but on
+            a phone it forced the whole board to scroll sideways inside a 335px
+            viewport. Below `md` the stages stack vertically instead. */}
+        <div className="pb-2 md:overflow-x-auto">
+        <div className="grid gap-4 md:min-w-[960px] xl:grid-cols-2 3xl:grid-cols-3">
           {visibleColumns.map((column) => (
             <Card key={column.key} className={cn("min-w-0 rounded-[32px] p-5", stageTone[column.key].columnClass)}>
               {inspect && column.key === "OVERDUE" ? (
diff --git a/src/components/admin/front-desk-logbook.tsx b/src/components/admin/front-desk-logbook.tsx
index 2380515..b7af98b 100644
--- a/src/components/admin/front-desk-logbook.tsx
+++ b/src/components/admin/front-desk-logbook.tsx
@@ -10,7 +10,7 @@ import { WhatsAppButton } from "@/components/shared/whatsapp-button";
 import { Select } from "@/components/ui/select";
 
 const inputClass =
-  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
+  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
 const buttonClass =
   "admin-focus inline-flex items-center justify-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--brand-700)] px-3.5 py-2 text-sm font-semibold text-white transition-colors hover:bg-[var(--brand-800,#15803d)]";
 
@@ -45,7 +45,7 @@ export function FrontDeskLogbookView({ logbook }: { logbook: FrontDeskLogbook })
           </h2>
           <form action={logVisitorAction} className="mt-4 grid gap-3 sm:grid-cols-2">
             <input name="fullName" required placeholder="Full name *" className={`${inputClass} sm:col-span-2`} aria-label="Visitor full name" />
-            <input name="phone" placeholder="Phone" className={inputClass} aria-label="Visitor phone" />
+            <input name="phone" type="tel" autoComplete="tel" placeholder="Phone" className={inputClass} aria-label="Visitor phone" />
             <input name="hostName" placeholder="Here to see" className={inputClass} aria-label="Host name" />
             <input name="purpose" placeholder="Purpose of visit" className={`${inputClass} sm:col-span-2`} aria-label="Purpose of visit" />
             <div className="sm:col-span-2">
@@ -105,7 +105,7 @@ export function FrontDeskLogbookView({ logbook }: { logbook: FrontDeskLogbook })
           </h2>
           <form action={logCallAction} className="mt-4 grid gap-3 sm:grid-cols-2">
             <input name="callerName" required placeholder="Caller name *" className={inputClass} aria-label="Caller name" />
-            <input name="phone" placeholder="Phone" className={inputClass} aria-label="Caller phone" />
+            <input name="phone" type="tel" autoComplete="tel" placeholder="Phone" className={inputClass} aria-label="Caller phone" />
             <Select name="direction" defaultValue="INBOUND" className="w-full" aria-label="Call direction">
               <option value="INBOUND">Inbound</option>
               <option value="OUTBOUND">Outbound</option>
diff --git a/src/components/admin/invoice-create-form.tsx b/src/components/admin/invoice-create-form.tsx
index cd46755..1bd38fc 100644
--- a/src/components/admin/invoice-create-form.tsx
+++ b/src/components/admin/invoice-create-form.tsx
@@ -8,7 +8,7 @@ import { createInvoiceAction, type InvoiceFormState } from "@/modules/invoices/a
 const INITIAL: InvoiceFormState = { ok: false, error: null };
 
 const inputClass =
-  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
+  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
 
 function SubmitButton() {
   const { pending } = useFormStatus();
diff --git a/src/components/admin/users-management.tsx b/src/components/admin/users-management.tsx
index b57a777..7fef60f 100644
--- a/src/components/admin/users-management.tsx
+++ b/src/components/admin/users-management.tsx
@@ -23,7 +23,7 @@ import type { AppRole } from "@prisma/client";
 const PROVISION_INITIAL: ProvisionUserResult | null = null;
 
 const inputCls =
-  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
+  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
 const labelCls = "block text-xs font-medium uppercase tracking-[0.12em] text-[var(--ink-500)]";
 
 const PROVISIONABLE_ROLES: Array<{ value: AppRole; label: string }> = [
diff --git a/src/components/dashboard/quick-actions.tsx b/src/components/dashboard/quick-actions.tsx
index db5e04b..5dda3dd 100644
--- a/src/components/dashboard/quick-actions.tsx
+++ b/src/components/dashboard/quick-actions.tsx
@@ -76,7 +76,7 @@ const ICONS: Record<QuickActionIcon, LucideIcon> = {
 };
 
 const triggerClass =
-  "group relative grid h-10 w-10 cursor-pointer place-items-center rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface-1,#fff)] text-[var(--ink-600)] shadow-[var(--shadow-sm)] transition-[colors,transform] duration-200 hover:-translate-y-0.5 hover:border-[var(--brand-300)] hover:text-[var(--brand-700)] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-500)] focus-visible:ring-offset-2 motion-reduce:transition-none motion-reduce:hover:translate-y-0";
+  "group relative grid h-11 w-11 cursor-pointer place-items-center sm:h-10 sm:w-10 rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface-1,#fff)] text-[var(--ink-600)] shadow-[var(--shadow-sm)] transition-[colors,transform] duration-200 hover:-translate-y-0.5 hover:border-[var(--brand-300)] hover:text-[var(--brand-700)] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-500)] focus-visible:ring-offset-2 motion-reduce:transition-none motion-reduce:hover:translate-y-0";
 
 const tooltipClass =
   "pointer-events-none absolute -bottom-9 left-1/2 z-20 -translate-x-1/2 whitespace-nowrap rounded-[var(--radius-sm,6px)] bg-slate-900 px-2 py-1 text-xs font-medium text-white opacity-0 shadow-md transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none";
diff --git a/src/components/dashboard/quick-create-forms.tsx b/src/components/dashboard/quick-create-forms.tsx
index 6c1e0e0..77f3b4f 100644
--- a/src/components/dashboard/quick-create-forms.tsx
+++ b/src/components/dashboard/quick-create-forms.tsx
@@ -12,7 +12,7 @@ import {
 const QUICK_FORM_INITIAL: QuickFormState = { ok: false, error: null };
 
 const inputClass =
-  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
+  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
 
 function SubmitButton({ label }: { label: string }) {
   const { pending } = useFormStatus();
@@ -46,7 +46,7 @@ export function VisitorQuickForm({ onSuccess }: { onSuccess: () => void }) {
   return (
     <form action={formAction} className="grid gap-3">
       <input name="fullName" required placeholder="Full name *" className={inputClass} aria-label="Visitor full name" />
-      <input name="phone" placeholder="Phone" className={inputClass} aria-label="Visitor phone" />
+      <input name="phone" type="tel" autoComplete="tel" placeholder="Phone" className={inputClass} aria-label="Visitor phone" />
       <input name="hostName" placeholder="Here to see" className={inputClass} aria-label="Host name" />
       <input name="purpose" placeholder="Purpose of visit" className={inputClass} aria-label="Purpose of visit" />
       <ErrorNote message={state.error} />
@@ -66,7 +66,7 @@ export function LeadQuickForm({ onSuccess }: { onSuccess: () => void }) {
     <form action={formAction} className="grid gap-3">
       <input name="fullName" required placeholder="Full name *" className={inputClass} aria-label="Lead full name" />
       <input name="email" type="email" required placeholder="Email *" className={inputClass} aria-label="Lead email" />
-      <input name="phone" placeholder="Phone" className={inputClass} aria-label="Lead phone" />
+      <input name="phone" type="tel" autoComplete="tel" placeholder="Phone" className={inputClass} aria-label="Lead phone" />
       <textarea
         name="message"
         required
diff --git a/src/components/marketing/marketing-footer.tsx b/src/components/marketing/marketing-footer.tsx
index d6c6e97..956b331 100644
--- a/src/components/marketing/marketing-footer.tsx
+++ b/src/components/marketing/marketing-footer.tsx
@@ -86,7 +86,7 @@ export function MarketingFooter({
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label={label}
-                  className="admin-focus footer-link inline-flex h-10 w-10 items-center justify-center rounded-full border border-[var(--line)] text-[var(--ink-600)] hover:border-[var(--brand-500)] hover:text-[var(--brand-700)]"
+                  className="admin-focus footer-link inline-flex h-11 w-11 items-center sm:h-10 sm:w-10 justify-center rounded-full border border-[var(--line)] text-[var(--ink-600)] hover:border-[var(--brand-500)] hover:text-[var(--brand-700)]"
                 >
                   <Icon className="h-4.5 w-4.5" aria-hidden="true" />
                 </a>
@@ -99,9 +99,9 @@ export function MarketingFooter({
             Explore
           </h4>
           <div className="space-y-2 text-sm text-[var(--ink-700)]">
-            <Link href="/properties" className="footer-link admin-focus block w-fit rounded">Listings</Link>
-            <Link href={buyerPortalHref} className="footer-link admin-focus block w-fit rounded">Buyer Portal</Link>
-            <Link href={adminPortalHref} className="footer-link admin-focus block w-fit rounded">Admin Dashboard</Link>
+            <Link href="/properties" className="footer-link admin-focus inline-flex min-h-11 w-fit items-center rounded sm:min-h-0">Listings</Link>
+            <Link href={buyerPortalHref} className="footer-link admin-focus inline-flex min-h-11 w-fit items-center rounded sm:min-h-0">Buyer Portal</Link>
+            <Link href={adminPortalHref} className="footer-link admin-focus inline-flex min-h-11 w-fit items-center rounded sm:min-h-0">Admin Dashboard</Link>
           </div>
         </div>
         <div className="space-y-3">
@@ -109,12 +109,12 @@ export function MarketingFooter({
             Company
           </h4>
           <div className="space-y-2 text-sm text-[var(--ink-700)]">
-            <Link href="/about" className="footer-link admin-focus block w-fit rounded">About</Link>
-            <Link href="/team" className="footer-link admin-focus block w-fit rounded">Team</Link>
+            <Link href="/about" className="footer-link admin-focus inline-flex min-h-11 w-fit items-center rounded sm:min-h-0">About</Link>
+            <Link href="/team" className="footer-link admin-focus inline-flex min-h-11 w-fit items-center rounded sm:min-h-0">Team</Link>
             {showCareers ? (
-              <Link href="/careers" className="footer-link admin-focus block w-fit rounded">Careers</Link>
+              <Link href="/careers" className="footer-link admin-focus inline-flex min-h-11 w-fit items-center rounded sm:min-h-0">Careers</Link>
             ) : null}
-            <Link href="/contact" className="footer-link admin-focus block w-fit rounded">Contact</Link>
+            <Link href="/contact" className="footer-link admin-focus inline-flex min-h-11 w-fit items-center rounded sm:min-h-0">Contact</Link>
           </div>
         </div>
       </Container>
diff --git a/src/components/messaging/message-composer.tsx b/src/components/messaging/message-composer.tsx
index 4cb8076..efec30a 100644
--- a/src/components/messaging/message-composer.tsx
+++ b/src/components/messaging/message-composer.tsx
@@ -45,7 +45,7 @@ export function MessageComposer({
         rows={2}
         placeholder={placeholder}
         aria-label="Message"
-        className="admin-focus w-full resize-y rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]"
+        className="admin-focus w-full resize-y rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]"
       />
       <div className="mt-2 flex items-center justify-between gap-3">
         {state.error ? (
diff --git a/src/components/messaging/new-thread-form.tsx b/src/components/messaging/new-thread-form.tsx
index c2939bd..3b3e6a3 100644
--- a/src/components/messaging/new-thread-form.tsx
+++ b/src/components/messaging/new-thread-form.tsx
@@ -8,7 +8,7 @@ import { createThreadAction, type MessageFormState } from "@/modules/messaging/a
 const INITIAL: MessageFormState = { ok: false, error: null };
 
 const inputClass =
-  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
+  "admin-focus w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white min-h-11 px-3 py-2 text-base sm:text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-400)]";
 
 function StartButton() {
   const { pending } = useFormStatus();
diff --git a/src/components/portal/announcement-banner.tsx b/src/components/portal/announcement-banner.tsx
index 61fd319..d854936 100644
--- a/src/components/portal/announcement-banner.tsx
+++ b/src/components/portal/announcement-banner.tsx
@@ -66,7 +66,7 @@ export function AnnouncementBanner({ items }: { items: AnnouncementNotice[] }) {
             type="button"
             aria-label="Dismiss announcement"
             onClick={() => dismiss(item.id)}
-            className="admin-focus grid h-7 w-7 shrink-0 place-items-center rounded-full text-[var(--ink-500)] transition-colors hover:bg-[var(--surface-1,#fff)] hover:text-[var(--ink-900)]"
+            className="admin-focus grid h-11 w-11 shrink-0 place-items-center rounded-full sm:h-7 sm:w-7 text-[var(--ink-500)] transition-colors hover:bg-[var(--surface-1,#fff)] hover:text-[var(--ink-900)]"
           >
             <X className="h-4 w-4" />
           </button>
diff --git a/src/components/portal/dashboard-shell.tsx b/src/components/portal/dashboard-shell.tsx
index 1a59c54..60e5ccd 100644
--- a/src/components/portal/dashboard-shell.tsx
+++ b/src/components/portal/dashboard-shell.tsx
@@ -297,7 +297,11 @@ export async function DashboardShell({
         <div className="flex flex-col gap-4 pt-1 sm:flex-row sm:items-start sm:justify-between">
           <DashboardGreeting name={greetingName} subtitle={greetingSubtitle} />
           <div className="flex shrink-0 flex-col items-start gap-3 sm:items-end">
-            <LiveClock />
+            {/* The clock is ambient detail that cost a whole row above the
+                fold on a phone; quick actions stay. */}
+            <div className="hidden sm:block">
+              <LiveClock />
+            </div>
             <QuickActions actions={quickActions} />
           </div>
         </div>
@@ -305,10 +309,14 @@ export async function DashboardShell({
           <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--ink-400)]">
             {area === "portal" ? "Buyer workspace" : "Company workspace"}
           </div>
-          <h1 className="mt-2 text-3xl font-semibold tracking-[-0.03em] text-[var(--ink-950)] sm:text-4xl">
+          <h1 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-[var(--ink-950)] sm:text-4xl">
             {title}
           </h1>
-          <p className="mt-2 max-w-3xl text-sm leading-6 text-[var(--ink-500)]">{subtitle}</p>
+          {/* Page descriptions run to three lines on a phone, pushing the
+              actual screen content further down; clamp to two there. */}
+          <p className="mt-2 line-clamp-2 max-w-3xl text-sm leading-6 text-[var(--ink-500)] sm:line-clamp-none">
+            {subtitle}
+          </p>
         </div>
         <AnnouncementBanner items={announcements} />
         <div className="tenant-content-reveal">{children}</div>
diff --git a/src/components/shared/theme-toggle.tsx b/src/components/shared/theme-toggle.tsx
index 9fdd65d..b19c15e 100644
--- a/src/components/shared/theme-toggle.tsx
+++ b/src/components/shared/theme-toggle.tsx
@@ -78,7 +78,7 @@ export function ThemeToggle({ className }: { className?: string }) {
       type="button"
       onClick={() => toggleTheme()}
       aria-pressed={dark}
-      className={`admin-interactive admin-focus inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--line)] text-[var(--ink-600)] hover:text-[var(--ink-900)] ${className ?? ""}`}
+      className={`admin-interactive admin-focus inline-flex h-11 w-11 items-center sm:h-9 sm:w-9 justify-center rounded-full border border-[var(--line)] text-[var(--ink-600)] hover:text-[var(--ink-900)] ${className ?? ""}`}
     >
       <span className="sr-only">{dark ? "Switch to light theme" : "Switch to dark theme"}</span>
       {dark ? <SunIcon /> : <MoonIcon />}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index bfffb1c..b7b4431 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -19,7 +19,10 @@ const buttonVariants = cva(
       size: {
         default: "h-11 px-5",
         lg: "h-12 px-6",
-        sm: "h-9 px-4",
+        // `sm` is the admin row-action size and was 36px everywhere — under the
+        // 44px touch minimum. It stays 44px on phones and keeps the denser
+        // 36px from `sm` up, where a mouse is doing the pointing.
+        sm: "h-11 px-4 sm:h-9",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index 39f0cce..7cdb3ce 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -84,6 +84,25 @@ export function DataTable<TData>({
   const rows = table.getRowModel().rows;
   const totalRows = table.getFilteredRowModel().rows.length;
 
+  /**
+   * Column label for the phone card layout. Header definitions are usually
+   * plain strings; anything else (a custom header renderer) is rendered
+   * through flexRender so the card shows the same label as the table head.
+   */
+  const headerLabelFor = (columnId: string) => {
+    const header = table
+      .getHeaderGroups()
+      .at(-1)
+      ?.headers.find((candidate) => candidate.column.id === columnId);
+    if (!header || header.isPlaceholder) {
+      return null;
+    }
+    const definition = header.column.columnDef.header;
+    return typeof definition === "string"
+      ? definition
+      : flexRender(definition, header.getContext());
+  };
+
   return (
     <div className={cn("min-w-0", className)}>
       {searchPlaceholder ? (
@@ -98,9 +117,78 @@ export function DataTable<TData>({
         </div>
       ) : null}
 
+      {/* Phone layout: one card per row. A table narrower than the viewport is
+          unreadable on a phone — these screens were 775-973px wide inside a
+          333px column, i.e. three screens of sideways scrolling. The first
+          column becomes the card heading and the rest become label/value
+          pairs, so the same columns stay legible in a single vertical scroll.
+          The real table takes over from `md` up. */}
+      <div className="space-y-3 md:hidden">
+        {rows.length === 0 ? (
+          <div
+            className={cn(
+              "px-4 py-10 text-center",
+              !frameless &&
+                "rounded-[var(--radius-lg)] border border-[var(--line)] bg-[var(--surface)]",
+            )}
+          >
+            <div className="text-sm font-medium text-[var(--ink-700)]">{emptyTitle}</div>
+            {emptyDescription ? (
+              <div className="mt-1 text-sm text-[var(--ink-500)]">{emptyDescription}</div>
+            ) : null}
+          </div>
+        ) : (
+          rows.map((row) => {
+            const [primaryCell, ...detailCells] = row.getVisibleCells();
+            return (
+              <div
+                key={row.id}
+                {...(onRowClick
+                  ? {
+                      role: "button",
+                      tabIndex: 0,
+                      onClick: () => onRowClick(row.original),
+                      onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          onRowClick(row.original);
+                        }
+                      },
+                    }
+                  : {})}
+                className={cn(
+                  "rounded-[var(--radius-lg)] border border-[var(--line)] bg-[var(--surface)] p-4 shadow-[var(--shadow-xs)]",
+                  onRowClick && "admin-focus cursor-pointer",
+                )}
+              >
+                {primaryCell ? (
+                  <div className="text-base font-semibold text-[var(--ink-950)]">
+                    {flexRender(primaryCell.column.columnDef.cell, primaryCell.getContext())}
+                  </div>
+                ) : null}
+                {detailCells.length > 0 ? (
+                  <dl className="mt-3 space-y-2">
+                    {detailCells.map((cell) => (
+                      <div key={cell.id} className="flex items-start justify-between gap-3">
+                        <dt className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--ink-500)]">
+                          {headerLabelFor(cell.column.id)}
+                        </dt>
+                        <dd className="min-w-0 text-right text-sm text-[var(--ink-800)]">
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </dd>
+                      </div>
+                    ))}
+                  </dl>
+                ) : null}
+              </div>
+            );
+          })
+        )}
+      </div>
+
       <div
         className={cn(
-          "overflow-x-auto",
+          "hidden overflow-x-auto md:block",
           !frameless &&
             "rounded-[var(--radius-lg)] border border-[var(--line)] bg-[var(--surface)] shadow-[var(--shadow-xs)]",
         )}
@@ -129,7 +217,9 @@ export function DataTable<TData>({
                         <button
                           type="button"
                           onClick={header.column.getToggleSortingHandler()}
-                          className="admin-focus inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] hover:text-[var(--ink-900)]"
+                          // -my-2 py-2 keeps the header's visual height while
+                          // giving the sort control a 32px+ hit area (it was 16px).
+                          className="admin-focus -my-2 inline-flex min-h-8 items-center gap-1.5 rounded-[var(--radius-sm)] py-2 hover:text-[var(--ink-900)]"
                         >
                           {flexRender(header.column.columnDef.header, header.getContext())}
                           <span aria-hidden="true" className="text-[var(--ink-400)]">
@@ -194,7 +284,7 @@ export function DataTable<TData>({
               type="button"
               onClick={() => table.previousPage()}
               disabled={!table.getCanPreviousPage()}
-              className="admin-interactive admin-focus h-9 rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 font-medium text-[var(--ink-700)] hover:bg-[var(--sand-100)] disabled:cursor-not-allowed disabled:opacity-50"
+              className="admin-interactive admin-focus h-11 rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-4 font-medium sm:h-9 sm:px-3 text-[var(--ink-700)] hover:bg-[var(--sand-100)] disabled:cursor-not-allowed disabled:opacity-50"
             >
               Previous
             </button>
@@ -202,7 +292,7 @@ export function DataTable<TData>({
               type="button"
               onClick={() => table.nextPage()}
               disabled={!table.getCanNextPage()}
-              className="admin-interactive admin-focus h-9 rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-3 font-medium text-[var(--ink-700)] hover:bg-[var(--sand-100)] disabled:cursor-not-allowed disabled:opacity-50"
+              className="admin-interactive admin-focus h-11 rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-4 font-medium sm:h-9 sm:px-3 text-[var(--ink-700)] hover:bg-[var(--sand-100)] disabled:cursor-not-allowed disabled:opacity-50"
             >
               Next
             </button>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index c330c7a..a879b10 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -132,7 +132,7 @@ export function Dialog({
           <button
             type="button"
             onClick={onClose}
-            className="admin-interactive admin-focus -mr-2 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-[var(--ink-500)] hover:bg-[var(--sand-100)] hover:text-[var(--ink-900)]"
+            className="admin-interactive admin-focus -mr-2 inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-[var(--ink-500)] hover:bg-[var(--sand-100)] hover:text-[var(--ink-900)] sm:h-9 sm:w-9"
           >
             <span className="sr-only">Close dialog</span>
             <svg
@@ -150,7 +150,14 @@ export function Dialog({
             </svg>
           </button>
         </div>
-        <div className="min-h-0 overflow-y-auto px-6 py-5">{children}</div>
+        {/* As a bottom sheet the panel runs to the screen edge, so the last
+            control would sit under the home indicator without the safe-area
+            inset. Desktop (where the panel floats) needs no extra padding. */}
+        <div
+          className="min-h-0 overflow-y-auto px-6 py-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:pb-5"
+        >
+          {children}
+        </div>
       </div>
     </div>,
     document.body,
@@ -166,7 +173,14 @@ export function DialogFooter({
   className?: string;
 }) {
   return (
-    <div className={cn("mt-5 flex flex-wrap items-center justify-end gap-3", className)}>
+    // Phones stack the actions full-width (primary last, nearest the thumb);
+    // from `sm` up they return to the right-aligned desktop row.
+    <div
+      className={cn(
+        "mt-5 flex flex-col-reverse gap-3 [&>button]:w-full sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:[&>button]:w-auto",
+        className,
+      )}
+    >
       {children}
     </div>
   );
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index b02411b..fa8191f 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -7,7 +7,10 @@ export function Input({
   return (
     <input
       className={cn(
-        "admin-interactive admin-focus h-11 w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-4 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-500)] focus:border-[var(--brand-500)] disabled:cursor-not-allowed disabled:bg-[var(--sand-50)] disabled:text-[var(--ink-500)]",
+        // text-base (16px) below `sm`: iOS Safari zooms the whole page when a
+        // focused field is under 16px, which is why every form felt like it
+        // "jumped" on a phone. Desktop keeps the denser 14px.
+        "admin-interactive admin-focus h-11 w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-4 text-base text-[var(--ink-900)] placeholder:text-[var(--ink-500)] focus:border-[var(--brand-500)] disabled:cursor-not-allowed disabled:bg-[var(--sand-50)] disabled:text-[var(--ink-500)] sm:text-sm",
         className,
       )}
       {...props}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 3b003d5..78b0437 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -18,7 +18,8 @@ export function Select({
   return (
     <span className={cn("relative inline-flex", className)}>
       <select
-        className="admin-interactive admin-focus h-11 w-full cursor-pointer appearance-none rounded-[var(--radius-md)] border border-[var(--line)] bg-white pl-4 pr-10 text-sm text-[var(--ink-900)] focus:border-[var(--brand-500)] disabled:cursor-not-allowed disabled:bg-[var(--sand-50)] disabled:text-[var(--ink-500)]"
+        // See Input: 16px below `sm` so iOS does not zoom the page on focus.
+        className="admin-interactive admin-focus h-11 w-full cursor-pointer appearance-none rounded-[var(--radius-md)] border border-[var(--line)] bg-white pl-4 pr-10 text-base text-[var(--ink-900)] focus:border-[var(--brand-500)] disabled:cursor-not-allowed disabled:bg-[var(--sand-50)] disabled:text-[var(--ink-500)] sm:text-sm"
         {...props}
       >
         {children}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 55eed00..0b671d2 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,8 @@ export function Textarea({
   return (
     <textarea
       className={cn(
-        "admin-interactive admin-focus min-h-28 w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-4 py-3 text-sm text-[var(--ink-900)] placeholder:text-[var(--ink-500)] focus:border-[var(--brand-500)] disabled:cursor-not-allowed disabled:bg-[var(--sand-50)] disabled:text-[var(--ink-500)]",
+        // See Input: 16px below `sm` so iOS does not zoom the page on focus.
+        "admin-interactive admin-focus min-h-28 w-full rounded-[var(--radius-md)] border border-[var(--line)] bg-white px-4 py-3 text-base text-[var(--ink-900)] placeholder:text-[var(--ink-500)] focus:border-[var(--brand-500)] disabled:cursor-not-allowed disabled:bg-[var(--sand-50)] disabled:text-[var(--ink-500)] sm:text-sm",
         className,
       )}
       {...props}

From f8ebdc205944355c2e8a2dbc7d92e4f036e732d6 Mon Sep 17 00:00:00 2001
From: Asapteejo <Asapteejo@users.noreply.github.com>
Date: Thu, 17 Sep 2026 09:15:59 +0100
Subject: [PATCH 2/2] fix(e2e): health checks call the API from a host Node can
 resolve

health.spec.ts uses the API request context, which runs in Node and so
does not get Chromium's --host-resolver-rules mapping for the
<tenant>.localhost host. On any platform whose resolver does not handle
*.localhost (Windows) the three health tests failed with ENOTFOUND while
the browser-driven specs passed.

The health endpoints are not tenant-specific, so a local run talks to
loopback directly; an E2E_BASE_URL pointing at a deployment is used
unchanged, which is how this spec is meant to gate a release.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 e2e/health.spec.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/e2e/health.spec.ts b/e2e/health.spec.ts
index ddab198..7f7a6b5 100644
--- a/e2e/health.spec.ts
+++ b/e2e/health.spec.ts
@@ -1,5 +1,18 @@
 import { expect, test } from "@playwright/test";
 
+/**
+ * These checks call the API from Node, not from the browser, so Chromium's
+ * `--host-resolver-rules` mapping for the `<tenant>.localhost` host does not
+ * apply and Node's resolver would fail on platforms that do not resolve
+ * *.localhost (Windows). The health endpoints are not tenant-specific, so the
+ * local runs talk to loopback directly; a deployed target is used unchanged.
+ */
+function healthUrl(path: string) {
+  const base = process.env.E2E_BASE_URL ?? "http://acme-realty.localhost:3000";
+  const resolved = base.includes(".localhost") ? "http://127.0.0.1:3000" : base;
+  return `${resolved.replace(/\/$/, "")}${path}`;
+}
+
 /**
  * Deployment health gates.
  *
@@ -13,7 +26,7 @@ import { expect, test } from "@playwright/test";
  */
 
 test("database has every migration the deployed code expects", async ({ request }) => {
-  const response = await request.get("/api/readyz");
+  const response = await request.get(healthUrl("/api/readyz"));
 
   expect(
     response.status(),
@@ -34,12 +47,12 @@ test("database has every migration the deployed code expects", async ({ request
 });
 
 test("liveness endpoint responds", async ({ request }) => {
-  const response = await request.get("/api/health");
+  const response = await request.get(healthUrl("/api/health"));
   expect(response.status()).toBe(200);
 });
 
 test("readyz never leaks credentials", async ({ request }) => {
-  const response = await request.get("/api/readyz");
+  const response = await request.get(healthUrl("/api/readyz"));
   const raw = await response.text();
 
   // Host names are fine; secrets are not.