fix(mobile): touch targets, keyboard viewport, PageNav overflow, modal fullscreen

- Bug #10: use `100dvh` on <html> so layout shrinks when mobile virtual keyboard appears (prevents composer from being pushed off-screen) - Bug #7: add `minWidth/minHeight: 44px` to all 8 composer toolbar IconButtons on mobile via mobileOrTablet() check (WCAG 2.1 AA touch target requirement) - Bug #8: add `@media (max-width: 750px) { width: 100% }` to PageNav recipe variants so the nav panel fills full width on mobile instead of overflowing with its fixed desktop width - Bug #9: introduce `useModalStyle(maxWidth)` hook — returns fullscreen styles on mobile (no border-radius, no max-width cap, height 100%) and desktop box styles otherwise; applied to LeaveRoomPrompt, LeaveSpacePrompt, ReportRoomModal, ReportUserModal - Bug #11: mark as FALSE POSITIVE in LOTUS_BUGS.md — `useState(() => atom(...))` is the correct Jotai pattern for stable local atom references - Scheduled Messages persistence: mark as FIXED — already uses atomWithStorage + createJSONStorage with error-safe JSON parsing - UrlPreviewCard TDS colors: mark as BRAND EXCEPTION — SVG logo fills and site badge backgrounds are official third-party brand colors; cannot convert without inventing new CSS variables (violates TDS rule 3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-18 13:34:40 -04:00
parent 26f900870b
commit c395f7d16e
9 changed files with 63 additions and 12 deletions
@@ -0,0 +1,29 @@
+import { CSSProperties } from 'react';
+import { ScreenSize, useScreenSizeContext } from './useScreenSize';
+
+/**
+ * Returns responsive modal box styles. On mobile the modal expands to fill the
+ * full viewport (no border radius, no max-width cap) so it doesn't float as a
+ * small centered card on a phone screen.
+ */
+export function useModalStyle(desktopMaxWidth: number): CSSProperties {
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
+
+  if (isMobile) {
+    return {
+      width: '100%',
+      height: '100%',
+      maxWidth: '100%',
+      maxHeight: '100%',
+      borderRadius: 0,
+      overflow: 'hidden auto',
+    };
+  }
+
+  return {
+    width: '100%',
+    maxWidth: desktopMaxWidth,
+    overflow: 'hidden',
+  };
+}