fix(mobile): apply useModalStyle to remaining dialog files (Bug #9)

Completes the mobile fullscreen modal pass — adds useModalStyle to
DeviceVerificationSetup, DeviceVerificationReset, AddExistingModal,
RoomEncryption prompt, RoomUpgradeDialog, Modal500, ReadReceiptAvatars,
and RoomTopicViewer. All floating Dialog/Modal components now go
fullscreen on mobile (≤750px). UIAFlowOverlay was already fullscreen
via <Overlay>; JoinRulesSwitcher/RoomNotificationSwitcher are dropdowns.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/DeviceVerificationSetup.tsx

@@ -1,4 +1,5 @@
 import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
+import { useModalStyle } from '../hooks/useModalStyle';
 import {
   Dialog,
   Header,
@@ -287,9 +288,10 @@ type DeviceVerificationSetupProps = {
 export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerificationSetupProps>(
   ({ onCancel }, ref) => {
     const [recoveryKey, setRecoveryKey] = useState<string>();
+    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref}>
+      <Dialog ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -324,9 +326,10 @@ type DeviceVerificationResetProps = {
 export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerificationResetProps>(
   ({ onCancel }, ref) => {
     const [reset, setReset] = useState(false);
+    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref}>
+      <Dialog ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/Modal500.tsx

@@ -2,12 +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';
 
 type Modal500Props = {
   requestClose: () => void;
   children: ReactNode;
 };
 export function Modal500({ requestClose, children }: Modal500Props) {
+  const modalStyle = useModalStyle(560);
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
@@ -19,7 +21,7 @@ export function Modal500({ requestClose, children }: Modal500Props) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="500" variant="Background">
+          <Modal size="500" variant="Background" style={modalStyle}>
             {children}
           </Modal>
         </FocusTrap>

src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx

@@ -12,6 +12,7 @@ import { UserAvatar } from '../user-avatar';
 import { StackedAvatar } from '../stacked-avatar';
 import { EventReaders } from '../event-readers';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 const MAX_DISPLAY = 5;
 
@@ -28,6 +29,7 @@ export function ReadReceiptAvatars({
   const useAuthentication = useMediaAuthentication();
   const [open, setOpen] = useState(false);
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+  const modalStyle = useModalStyle(360);
 
   if (userIds.length === 0) return null;
 
@@ -51,7 +53,7 @@ export function ReadReceiptAvatars({
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal variant="Surface" size="300">
+            <Modal variant="Surface" size="300" style={modalStyle}>
               <EventReaders room={room} eventId={eventId} requestClose={() => setOpen(false)} />
             </Modal>
           </FocusTrap>

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import parse from 'html-react-parser';
 import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
+import { useModalStyle } from '../../hooks/useModalStyle';
 import classNames from 'classnames';
 import Linkify from 'linkify-react';
 import * as css from './style.css';
@@ -17,6 +18,7 @@ export const RoomTopicViewer = as<
   }
 >(({ name, topic, requestClose, className, ...props }, ref) => {
   const topicStr = typeof topic === 'string' ? topic : topic.topic;
+  const modalStyle = useModalStyle(480);
   const isFormatted =
     typeof topic !== 'string' &&
     topic.format === 'org.matrix.custom.html' &&
@@ -28,6 +30,7 @@ export const RoomTopicViewer = as<
       flexHeight
       className={classNames(css.ModalFlex, className)}
       aria-labelledby="room-topic-title"
+      style={modalStyle}
       {...props}
       ref={ref}
     >