fix(mobile): apply useModalStyle to 7 more modal dialogs

ScheduleMessageModal, PollCreator, JoinAddressPrompt, JumpToTime,
EditHistoryModal, ForwardMessageDialog, RemindMeDialog — all now
render fullscreen on mobile (≤750px) and as a capped-width box on
desktop, consistent with the existing useModalStyle pattern.

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

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -18,6 +18,7 @@ import {
 } from 'folds';
 import { stopPropagation } from '../../utils/keyboard';
 import { isRoomAlias, isRoomId } from '../../utils/matrix';
+import { useModalStyle } from '../../hooks/useModalStyle';
 import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
 import { tryDecodeURIComponent } from '../../utils/dom';
 
@@ -26,6 +27,7 @@ type JoinAddressProps = {
   onCancel: () => void;
 };
 export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
+  const modalStyle = useModalStyle(480);
   const [invalid, setInvalid] = useState(false);
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -71,7 +73,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/features/room/PollCreator.tsx

@@ -19,6 +19,7 @@ import {
 import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 interface PollCreatorProps {
   roomId: string;
@@ -28,6 +29,7 @@ interface PollCreatorProps {
 
 export function PollCreator({ roomId, onClose }: PollCreatorProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(440);
   const [question, setQuestion] = useState('');
   const [options, setOptions] = useState<string[]>(['', '']);
   const [isMultiple, setIsMultiple] = useState(false);
@@ -109,9 +111,7 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
               background: color.Surface.Container,
               borderRadius: config.radii.R400,
               boxShadow: color.Other.Shadow,
-              width: '100vw',
+              ...modalStyle,
-              maxWidth: 440,
-              overflow: 'hidden',
             }}
           >
             {/* Header */}

src/app/features/room/ScheduleMessageModal.tsx

@@ -19,6 +19,7 @@ import { IContent } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
 import { scheduleMessage } from '../../utils/scheduledMessages';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 interface ScheduleMessageModalProps {
   roomId: string;
@@ -89,6 +90,7 @@ export function ScheduleMessageModal({
   onScheduled,
   onClose,
 }: ScheduleMessageModalProps) {
+  const modalStyle = useModalStyle(400);
   const mx = useMatrixClient();
   const [messageText, setMessageText] = useState(initialBody ?? '');
   const [submitting, setSubmitting] = useState(false);
@@ -186,9 +188,7 @@ export function ScheduleMessageModal({
               background: color.Surface.Container,
               borderRadius: config.radii.R400,
               boxShadow: color.Other.Shadow,
-              width: '100vw',
+              ...modalStyle,
-              maxWidth: 400,
-              overflow: 'hidden',
             }}
           >
             {/* Header */}

src/app/features/room/jump-to-time/JumpToTime.tsx

@@ -31,6 +31,7 @@ import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '../../
 import { DatePicker, TimePicker } from '../../../components/time-date';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 
 type JumpToTimeProps = {
   onCancel: () => void;
@@ -38,6 +39,7 @@ type JumpToTimeProps = {
 };
 export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(480);
   const room = useRoom();
   const alive = useAlive();
   const createStateEvent = useStateEvent(room, StateEvent.RoomCreate);
@@ -96,7 +98,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

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

@@ -20,6 +20,7 @@ import {
 import { MatrixEvent, Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 import { sanitizeCustomHtml } from '../../../utils/sanitize';
 import { LINKIFY_OPTS } from '../../../plugins/react-custom-html-parser';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -92,6 +93,7 @@ function getVersionContent(evt: MatrixEvent): ReactNode {
 
 export function EditHistoryModal({ room, mEvent, onClose }: EditHistoryModalProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(560);
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
@@ -167,6 +169,7 @@ export function EditHistoryModal({ room, mEvent, onClose }: EditHistoryModalProp
             role="dialog"
             aria-modal="true"
             aria-labelledby="edit-history-title"
+            style={modalStyle}
           >
             <Header
               variant="Surface"

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

@@ -19,6 +19,7 @@ import { MatrixEvent, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 import { mDirectAtom } from '../../../state/mDirectList';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { mxcUrlToHttp } from '../../../utils/matrix';
@@ -78,6 +79,7 @@ type Props = {
 
 export function ForwardMessageDialog({ mEvent, onClose }: Props) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(400);
   const directs = useAtomValue(mDirectAtom);
   const useAuthentication = useMediaAuthentication();
   const [query, setQuery] = useState('');
@@ -129,6 +131,7 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
               borderRadius: config.radii.R500,
               display: 'flex',
               flexDirection: 'column',
+              ...modalStyle,
             }}
           >
             <Box

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

@@ -17,6 +17,7 @@ import {
 } from 'folds';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useReminders } from '../../../hooks/useReminders';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 
 type RemindMeDialogProps = {
   roomId: string;
@@ -39,6 +40,7 @@ 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(), []);
@@ -73,8 +75,7 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
               background: color.Surface.Container,
               borderRadius: config.radii.R400,
               boxShadow: color.Other.Shadow,
-              width: '100vw',
+              ...modalStyle,
-              maxWidth: 280,
               overflow: 'hidden',
             }}
           >