style: unzoom app for small screens

[lethib]

No description provided.

[claude]

Claude finished @lethib's task in 2m 50s —— View job

---

Review complete

• Gather context (PR diff, changed files)
• Review code quality, security, performance
• Post inline comments for actionable issues
• Post summary review

This is a focused CSS/layout PR to de-densify the UI on smaller screens (shrinking the effective root font-size, widening/sticky-ing tables, and swapping container for a fixed max-w-[1800px]). No security or performance concerns — this is presentation-only, no data/query changes.

Two actionable findings posted as inline comments:

1. frontend/src/index.css:185 — the new html { font-size: clamp(14px, 13px + 0.12vw, 16px) } uses fixed px bounds, which overrides a user's browser/OS accessibility font-size preference instead of scaling from it. Recommend using rem-relative bounds instead.
2. min-h-[calc(100dvh-4rem)] — duplicated identically across 5 route files, with the 4rem implicitly coupled to main's py-8 padding in __root.tsx. Worth extracting to a shared class/constant to avoid silent drift if that padding ever changes.

Everything else (sticky table header/footer, maxHeight prop on Table, grid reflow in BusinessInformationCard) looks correct and consistent with the existing component patterns.

[claude]

Setting html { font-size: … } with fixed px bounds (clamp(14px, 13px + 0.12vw, 16px)) overrides the browser's default root font size unconditionally. Since Tailwind spacing/typography is rem-based, this means a user who has increased their browser's default font size for accessibility reasons (rather than using page zoom) will have that preference overridden — the app will always render between 14–16px regardless of their OS/browser text-size setting. Consider deriving the clamp from 1rem-relative units (e.g. clamp(0.875rem, 0.8125rem + 0.12vw, 1rem)) so it scales proportionally to the user's own base font size instead of replacing it.

Fix this →

[claude]

The min-h-[calc(100dvh-4rem)] offset is duplicated identically across 5 files (companies/index.tsx:20, companies/$companyId/index.tsx:72, offices/index.tsx:44, patients/index.tsx:54, patients/$patientId/index.tsx:48). The 4rem magic number implicitly depends on main's py-8 padding in __root.tsx — if that padding ever changes, all 5 occurrences silently go stale (extra/insufficient min-height) since nothing ties them together. Consider extracting this to a shared constant/class (e.g. a page-container utility class in index.css, or a small wrapper component) so the coupling is expressed once.