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
@@ -100,9 +100,9 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 ### 11. Inline Jotai atom creation

 - **File:** `cinny/src/app/hooks/useSpaceHierarchy.ts`
- **Status:** **OPEN**
+- **Status:** **FALSE POSITIVE — CLOSED**
 - **Issue:** Inline Jotai atom creation in a hook risks re-rendering components unnecessarily.
- **Proposed Fix:** Lift atom definition out of the hook or utilize `useMemo` to ensure atom stability.
+- **Resolution:** `useState(() => atom(...))` IS the correct Jotai pattern for local stable atom references. The factory function form of `useState` ensures the atom is created only once per component mount. No change warranted.

 ---

@@ -123,7 +123,7 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 | State Sync              | Fire-and-forget network call to set offline presence during `pagehide` event may not complete reliably, potentially causing UI drift in presence status. | `cinny/src/app/hooks/usePresenceUpdater.ts`     | OPEN   |
 | State Sync              | Fire-and-forget network call `setPresence().catch(...)` suppresses errors, meaning the app may falsely assume presence update success.                   | `cinny/src/app/hooks/usePresenceUpdater.ts`     | OPEN   |
 | Memory Leak             | Decrypted Media Memory Leak (Gallery & Lightbox) due to missing virtualization and blob revocation.                                                      | `cinny/src/app/features/room/MediaGallery.tsx`  | OPEN   |
-| Data Persistence        | Scheduled Messages are ephemeral (lost on refresh) due to fragile `localStorage` parsing.                                                                | `cinny/src/app/state/scheduledMessages.ts`      | OPEN   |
+| Data Persistence        | Scheduled Messages are ephemeral (lost on refresh) due to fragile `localStorage` parsing.                                                                | `cinny/src/app/state/scheduledMessages.ts`      | FIXED — now uses `atomWithStorage` + `createJSONStorage` (Jotai's built-in persistence with error-safe JSON parsing) |
 | Memory Leak             | Potential memory leak due to uncleaned `handleMouseMove` listener in `usePan`.                                                                           | `cinny/src/app/hooks/usePan.ts`                 | OPEN   |
 | Asset Optimization      | Large unoptimized media asset (213KB) found in `public/res`.                                                                                             | `public/res/Lotus.png`                          | OPEN   |
 | Data Persistence        | Non-atomic `localStorage` updates in session management can lead to inconsistent state.                                                                  | `cinny/src/app/state/sessions.ts`               | OPEN   |
@@ -150,7 +150,7 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 | :-------------------------------------------------------------------- | :-------------------------------------------------------- |
 | Hardcoded inline style `cursor: 'pointer'`                            | `cinny/src/app/plugins/react-custom-html-parser.tsx`      |
 | Hardcoded color `#00D4FF`, `#FFB300` ✅ **VERIFIED COMPLIANT**        | `cinny/src/app/components/event-readers/EventReaders.tsx` |
-| Hardcoded color `#EE1D52`, `#9146ff`, `#ff4500`, `#cb3837`, `#f48024` | `cinny/src/app/components/url-preview/UrlPreviewCard.tsx` |
+| Hardcoded color `#EE1D52`, `#9146ff`, `#ff4500`, `#cb3837`, `#f48024` ⚠️ **BRAND EXCEPTION** | `cinny/src/app/components/url-preview/UrlPreviewCard.tsx` + `UrlPreview.css.tsx` — official third-party brand colors in SVG logos and site badge backgrounds; cannot convert to CSS variables without inventing new tokens (violates TDS rule 3) |
 | Massive number of hardcoded `backgroundColor` values                  | `cinny/src/app/features/lotus/chatBackground.ts`          |
 | Hardcoded colors `#00FF88`, `#FF6B00` ✅ **VERIFIED COMPLIANT**       | `cinny/src/app/features/call/CallControls.tsx`            |
 | Hardcoded fallback hexes in toast colors ✅ **FIXED**                 | `cinny/src/app/features/toast/LotusToastContainer.tsx`    |