fix(ui): settings modal sizing regression + 17 more folds audit findings

Fix settings modal regression: Modal500 was wrapped in useModalStyle(560),
forcing maxWidth 560px and squishing the two-pane Settings layout (folds
size="500" is ~50rem). Restore desktop width to the folds recipe while
keeping mobile fullscreen.

N-series fixes:
- N13 ScheduledMessagesTray header: <Box as="button"> -> folds <Button>
- N28 composer char counter: drop undefined --tc-surface-low + opacity,
  use priority="300" and config.space token
- N31 collapsible "Read more" toggle: padded <Button> -> flush inline-button
  pattern matching (edited) link
- N41 UserPrivateNotes "Saving..." now shows a folds <Spinner>
- N43 Night Light slider: add accentColor; label opacity -> priority
- N44 mention-highlight Reset: bare <button> -> folds <Button> (drops
  undefined --border-interactive-normal); Boot button kept (TDS-only)
- N45 SelectTheme trigger variant -> Secondary to match SettingsSelect
- N49 RoomInsights StatTile emoji -> folds <Icon> (Photo/VideoCamera/
  Headphone/File)
- N54/N57 PiP overlay badges + fullscreen button: token discipline
  (config.radii/space, folds Text); dark scrim kept for video legibility
- N60 knock badge: match Pinned Messages pattern (no wrapper div, toRem
  insets, no hardcoded size overrides)
- N62 unverified-device banner: 3px left-accent -> standard border via
  color.Warning.ContainerLine; drop opacity hacks
- N65 Edit History: real "Load more" pagination (accumulate next_batch,
  de-dupe by id, re-sort by ts) replacing passive text
- N66 search date fields: raw <input type="date"> -> folds <Input>
- N67 SeasonalEffect z-index 9999 -> 9997 (below Night Light + modals)
- N73 Pending Requests header uses css.MembersGroupLabel
- N74 remove raw em-sized emoji <span> in RoomNavItem name
- N85/N86 RemindMeDialog: <Box role="dialog"> -> folds <Dialog>; preset
  MenuItems -> Buttons (fixes invalid menuitem-in-dialog ARIA)

Document deliberate WON'T FIX rationale for N9, N51, N61, N71, N75, N77.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room/message/RemindMeDialog.tsx

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Box,
-  color,
+  Button,
   config,
+  Dialog,
   Header,
   Icon,
   IconButton,
   Icons,
   Line,
-  MenuItem,
   Overlay,
   OverlayBackdrop,
   OverlayCenter,
@@ -42,7 +42,6 @@ function getPresets(): Array<{ label: string; ms: number }> {
 export function RemindMeDialog({ roomId, eventId, previewText, onClose }: RemindMeDialogProps) {
   const modalStyle = useModalStyle(320);
   const { addReminder } = useReminders();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const presets = useMemo(() => getPresets(), []);
 
   const handlePick = async (ms: number) => {
@@ -66,18 +65,12 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Box
+          <Dialog
+            variant="Surface"
             role="dialog"
             aria-modal="true"
             aria-labelledby="remind-me-title"
-            direction="Column"
-            style={{
-              background: color.Surface.Container,
-              borderRadius: config.radii.R400,
-              boxShadow: color.Other.Shadow,
-              ...modalStyle,
-              overflow: 'hidden',
-            }}
+            style={modalStyle}
           >
             <Header
               variant="Surface"
@@ -109,14 +102,21 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
             )}
             <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
               {presets.map((p) => (
-                <MenuItem key={p.label} size="300" radii="300" onClick={() => handlePick(p.ms)}>
-                  <Text size="T300" truncate>
+                <Button
+                  key={p.label}
+                  size="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  radii="300"
+                  onClick={() => handlePick(p.ms)}
+                >
+                  <Text size="B300" truncate>
                     {p.label}
                   </Text>
-                </MenuItem>
+                </Button>
               ))}
             </Box>
-          </Box>
+          </Dialog>
         </FocusTrap>
       </OverlayCenter>
     </Overlay>