Make admin and community screens mobile friendly

[kentcdodds]

Summary

Audited every screen of the web UI at 320px, 360px, and 390px viewports (logged out, logged in, and admin) with an automated Playwright harness that flags horizontal document overflow, and fixed everything it caught:

• /admin/invites (the worst offender): the "Create user" (3-track) and "Create invite" (5-track) form grids never stacked, so inputs were squished to ~30px and the datetime input pushed the page 78–85px past the viewport. They now collapse to 2 columns on tablet and a single column on mobile, using minmax(0, 1fr) so intrinsic input widths can't force overflow.
• /admin/usage: the drill-down card grid used minmax(24rem, 1fr) (384px minimum) which overflowed phones, and the Entitlements table had no horizontal-scroll wrapper. The grid minimum is now min(24rem, 100%) and the table scrolls within its card like the neighboring tables.
• /account/integrations: the integration card grid's minmax(22rem, 1fr) minimum could overflow at ≤360px; now min(22rem, 100%).
• /community: the search field's minWidth: 20rem overflowed a 320px viewport; now min(20rem, 100%).
• detailGridCss (shared primitive): grid minimum now min(14rem, 100%) as a defensive floor for very narrow screens.

After the fixes, all 24 audited screens report 0px horizontal overflow at 320/360/390px, and tablet (800px) and desktop (1280px) layouts are unchanged.

Before / after (390px)

Admin invites before	Admin invites after

Admin usage before	Admin usage after

Demo of the invite-creation flow on an emulated iPhone 12 Pro:

Testing

• ✅ npm run validate (format, lint, typecheck, unit, Playwright E2E, MCP E2E — all green)
• ✅ Automated mobile overflow audit of 24 screens at 320/360/390px: 0px overflow everywhere
• ✅ Tablet (800px) and desktop (1280px) spot checks on the changed pages: layout unchanged, 0px overflow
• ✅ Manual mobile-emulation test of the invite creation flow (see video)

System recap — composes existing primitives (low risk)

Mode: recap · Base: main @ 09c293a0 · Head: 14023e8a

Classification: composes — responsive CSS-in-JS layout tweaks inside the browser app; no primitive behavior, shape, or contract changes.

Primitives touched

Primitive	Group	Impact
app-ui	surfaces	composes — mobile breakpoint styling in client routes/styles

System map

flowchart LR
	appUi["app-ui"]:::touched
	worker["worker (entry)"]:::untouched
	worker --> appUi
	classDef touched fill:#1a7f37,color:#fff
	classDef extended fill:#9a6700,color:#fff
	classDef added fill:#cf222e,color:#fff
	classDef untouched fill:#57606a,color:#fff

Loading

  

Summary by CodeRabbit

• Improvements
  • Made several grid-based layouts and form sections more responsive on smaller screens.
  • Search, account integrations, and usage views now fit narrower containers better without overflowing.
  • Improved the usability of table and detail layouts by allowing horizontal scrolling or more flexible column sizing where needed.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 75e207a6-4e60-4941-9098-bf1e45e6dccd

📥 Commits

Reviewing files that changed from the base of the PR and between 09c293a and 14023e8.

📒 Files selected for processing (5)

• packages/worker/client/routes/account-integrations.tsx
• packages/worker/client/routes/admin-invites.tsx
• packages/worker/client/routes/admin-usage.tsx
• packages/worker/client/routes/community.tsx
• packages/worker/client/styles/style-primitives.ts

---

📝 Walkthrough

Walkthrough

CSS grid and width values across several worker client routes and a shared style primitive were changed from fixed minimum sizes to responsive min()-capped minimums. Admin invites forms gained mobile/tablet media-query overrides, and the admin usage entitlements table was wrapped in a horizontally scrollable container.

Changes

Responsive grid and layout tweaks

Layer / File(s)	Summary
Shared grid primitive responsive sizing packages/worker/client/styles/style-primitives.ts	detailGridCss.gridTemplateColumns changes from minmax(14rem, 1fr) to minmax(min(14rem, 100%), 1fr).
Route-level responsive grid updates packages/worker/client/routes/account-integrations.tsx, packages/worker/client/routes/community.tsx, packages/worker/client/routes/admin-usage.tsx	Integrations grid, community search field minWidth, and admin-usage entitlements grid all switch to min()-capped responsive sizing; the entitlements table is wrapped in an overflowX: auto container.
Admin invites form responsive breakpoints packages/worker/client/routes/admin-invites.tsx	Imports mq and adds mq.mobile/mq.tablet overrides to the Create user and Create invite form grids, adjusting gridTemplateColumns and alignItems at smaller viewports.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• kentcdodds/kody#627: Adds the /admin/usage route this PR later modifies with responsive grid and scrollable table changes.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: making admin and community screens responsive on small screens.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/mobile-friendly-ui-audit-f2ca

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🔎 Preview deployed: https://kody-pr-663.kody-a99.workers.dev

Worker: kody-pr-663
D1: kody-pr-663-db
KV: kody-pr-663-oauth-kv

Mocks:

• cloudflare: https://kody-pr-663-mock-cloudflare.kody-a99.workers.dev/__mocks (kody-pr-663-mock-cloudflare)