feat(mobile): make tables, forms and touch targets work at 375px - #7
Merged
Merged
Conversation
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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Audited at 375px with touch emulation on the live tenant site and on admin with a real session, measuring element geometry rather than eyeballing screenshots. Every number below is measured before and after.
Tables — the worst offender
DataTableonly wrapped the table inoverflow-x-auto, so at 375px:/admin/paymentsrendered 973px wide inside a 333px column — three screens of sideways scrolling/admin/invoices775px/adminDeal Board was worse and isn't a table at all: a hardcodedmin-w-[960px]gridBelow
md, each row now renders as a card (first column as heading, the rest as label/value pairs, row actions preserved); the table returns atmdand up. It lands once in the shared component, so all nineDataTablescreens plusSimpleDataTable/DataTableCardbenefit. The Deal Board stacks its stage columns on phones.Not covered by this PR: 11 files still render raw
<table>outside the shared primitives (admin analytics, benchmarks, listings/marketplace, team/commission-rules, incident/support management, development-calculator, 4 superadmin screens). They still side-scroll.iOS zoom on every form
Input,SelectandTextareaused 14px text. iOS Safari zooms the whole page when a focused field is under 16px, which is why forms "jumped" on a phone. They are now 16px belowsm, keeping the denser 14px above it. The same fix went to the 9 inline input styles that bypassed the primitives (also 38px tall → 44px), and phone fields in the front-desk/quick-create forms gainedtype="tel".Touch targets (44px minimum)
Measured offenders, all now 44px on phones and unchanged from
smup:Button size="sm"(36px, 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).Content priority
Admin pages stacked ~1600px of chrome above the data: the ambient clock is hidden on phones and page descriptions clamp to two lines.
/propertiesburied every listing under six stacked filters — they now collapse behind a toggle, implemented with CSS only (no JS, still server-rendered) and forced open frommdup.Dialogs
The bottom-sheet behaviour under
smwas already correct. Added safe-area padding so actions clear the home indicator, and footer buttons now stack full-width on phones.Measured result
/admin/admin/payments/admin/invoices//contactRemaining sub-44px items are per-screen links and chips (e.g. "Create deal", "Add line item"), not shared primitives — a follow-up.
Design tokens and dark mode are untouched: this is layout and interaction only.
npm run checkgreen (533 tests, typecheck, lint, build).🤖 Generated with Claude Code