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
@@ -20,6 +20,7 @@ import { Method } from 'matrix-js-sdk';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';

 type ReportCategory = 'spam' | 'harassment' | 'inappropriate' | 'other';

@@ -37,6 +38,7 @@ type ReportUserModalProps = {

 export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
  const mx = useMatrixClient();
+  const modalStyle = useModalStyle(420);
  const [category, setCategory] = useState<ReportCategory>('spam');

  const [reportState, submitReport] = useAsyncCallback(
@@ -109,9 +111,7 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
              background: color.Surface.Container,
              borderRadius: config.radii.R400,
              boxShadow: color.Other.Shadow,
-              width: '100%',
-              maxWidth: 420,
-              overflow: 'hidden',
+              ...modalStyle,
            }}
          >
            <Header