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/components/CallEmbedProvider.tsx

@@ -435,18 +435,19 @@ function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
   const localUserId = mx.getSafeUserId();
   const localDisplayName = getMxIdLocalPart(localUserId) ?? localUserId;
 
+  // Dark translucent scrim is intentional: these badges overlay arbitrary
+  // video, so a theme surface token would not guarantee legibility.
   const badgeStyle: React.CSSProperties = {
     position: 'absolute',
     zIndex: 3,
     background: 'rgba(0,0,0,0.65)',
     backdropFilter: 'blur(4px)',
-    borderRadius: '6px',
-    padding: '3px 7px',
+    borderRadius: config.radii.R300,
+    padding: `${config.space.S100} ${config.space.S200}`,
     display: 'flex',
     alignItems: 'center',
-    gap: '4px',
+    gap: config.space.S100,
     pointerEvents: 'none',
-    fontSize: '12px',
     lineHeight: 1,
     userSelect: 'none',
   };
@@ -456,21 +457,25 @@ function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
       {localMicMuted && (
         <div
           aria-label={`Your microphone is muted (${localDisplayName})`}
-          title={`Your microphone is muted`}
-          style={{ ...badgeStyle, bottom: '8px', left: '8px', color: color.Critical.Main }}
+          title="Your microphone is muted"
+          style={{ ...badgeStyle, bottom: config.space.S200, left: config.space.S200 }}
         >
-          <Icon size="100" src={Icons.MicMute} filled />
-          <span style={{ fontSize: '11px', fontWeight: 600 }}>You</span>
+          <Icon size="100" src={Icons.MicMute} filled style={{ color: color.Critical.Main }} />
+          <Text as="span" size="T200" style={{ color: color.Critical.Main }}>
+            You
+          </Text>
         </div>
       )}
       {allRemoteMuted && (
         <div
           aria-label="All other participants are muted"
           title="All other participants are muted"
-          style={{ ...badgeStyle, top: '8px', right: '8px', color: color.Warning.Main }}
+          style={{ ...badgeStyle, top: config.space.S200, right: config.space.S200 }}
         >
-          <Icon size="50" src={Icons.MicMute} />
-          <span style={{ fontSize: '11px' }}>All muted</span>
+          <Icon size="50" src={Icons.MicMute} style={{ color: color.Warning.Main }} />
+          <Text as="span" size="T200" style={{ color: color.Warning.Main }}>
+            All muted
+          </Text>
         </div>
       )}
     </>
@@ -925,19 +930,23 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 padding: '6px',
               }}
             >
-              <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+              <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
                 {document.fullscreenEnabled && (
                   <button
                     type="button"
                     aria-label={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
                     title={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
-                    onClick={(e) => { e.stopPropagation(); handlePipFullscreen(); }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handlePipFullscreen();
+                    }}
                     style={{
+                      // Dark scrim is intentional for legibility over arbitrary video.
                       background: 'rgba(0,0,0,0.65)',
                       backdropFilter: 'blur(4px)',
                       border: 'none',
-                      borderRadius: '6px',
-                      padding: '4px 7px',
+                      borderRadius: config.radii.R300,
+                      padding: `${config.space.S100} ${config.space.S200}`,
                       color: '#fff',
                       fontSize: '13px',
                       cursor: 'pointer',
@@ -953,8 +962,8 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                   style={{
                     background: 'rgba(0,0,0,0.65)',
                     backdropFilter: 'blur(4px)',
-                    borderRadius: '6px',
-                    padding: '3px 8px',
+                    borderRadius: config.radii.R300,
+                    padding: `${config.space.S100} ${config.space.S200}`,
                     color: '#fff',
                     fontSize: '11px',
                     fontWeight: 600,

src/app/components/Modal500.tsx

@@ -2,14 +2,14 @@ import React, { ReactNode } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
 import { stopPropagation } from '../utils/keyboard';
-import { useModalStyle } from '../hooks/useModalStyle';
+import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 
 type Modal500Props = {
   requestClose: () => void;
   children: ReactNode;
 };
 export function Modal500({ requestClose, children }: Modal500Props) {
-  const modalStyle = useModalStyle(560);
+  const isMobile = useScreenSizeContext() === ScreenSize.Mobile;
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
@@ -21,7 +21,25 @@ export function Modal500({ requestClose, children }: Modal500Props) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="500" variant="Background" style={modalStyle}>
+          <Modal
+            size="500"
+            variant="Background"
+            // On mobile expand to fill the viewport. On desktop fall back to the
+            // folds `size="500"` width (~50rem) — overriding maxWidth here would
+            // squish the two-pane settings layout.
+            style={
+              isMobile
+                ? {
+                    width: '100%',
+                    height: '100%',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    borderRadius: 0,
+                    overflow: 'hidden auto',
+                  }
+                : undefined
+            }
+          >
             {children}
           </Modal>
         </FocusTrap>

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-import { Box, Button, Icon, Icons, Text, color, toRem } from 'folds';
+import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';
@@ -94,15 +94,21 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
         )}
       </div>
       {needsCollapse && (
-        <Button
-          size="300"
-          variant="Secondary"
-          fill="None"
-          style={{ marginTop: '4px' }}
+        <button
+          type="button"
           onClick={() => setCollapsed((c) => !c)}
+          style={{
+            cursor: 'pointer',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            marginTop: config.space.S100,
+          }}
         >
-          <Text size="B300">{collapsed ? 'Read more ↓' : 'Show less ↑'}</Text>
-        </Button>
+          <Text as="span" size="T200" style={{ color: color.Primary.Main }}>
+            {collapsed ? 'Read more ↓' : 'Show less ↑'}
+          </Text>
+        </button>
       )}
     </div>
   );

src/app/components/seasonal/SeasonalEffect.tsx

@@ -756,7 +756,9 @@ function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: bool
         position: 'fixed',
         inset: 0,
         pointerEvents: 'none',
-        zIndex: 9999,
+        // Below the Night Light overlay (9998) so seasonal particles are tinted
+        // by it, and below modals (9999) so dialogs are never obscured.
+        zIndex: 9997,
         overflow: 'hidden',
       }}
     >

src/app/components/user-profile/UserRoomProfile.tsx

@@ -237,11 +237,20 @@ function UserPrivateNotes({ userId }: { userId: string }) {
 
   return (
     <Box direction="Column" gap="200">
-      <Box justifyContent="SpaceBetween" alignItems="Center">
+      <Box justifyContent="SpaceBetween" alignItems="Center" gap="200">
         <Text size="L400">Private Note</Text>
-        <Text size="T200" priority="400">
-          {saving ? 'Saving…' : charsLeft < 100 ? `${charsLeft} left` : ''}
-        </Text>
+        {saving ? (
+          <Box alignItems="Center" gap="100" shrink="No">
+            <Spinner variant="Success" fill="Solid" size="100" />
+            <Text size="T200" priority="400">
+              Saving…
+            </Text>
+          </Box>
+        ) : (
+          <Text size="T200" priority="400">
+            {charsLeft < 100 ? `${charsLeft} left` : ''}
+          </Text>
+        )}
       </Box>
       <textarea
         value={draft}