From c4f00ed483f75252eea4766a83e0c7a38f4a01c4 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Thu, 18 Jun 2026 15:14:30 -0400 Subject: [PATCH] fix(mobile): apply useModalStyle to 7 more modal dialogs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../components/join-address-prompt/JoinAddressPrompt.tsx | 4 +++- src/app/features/room/PollCreator.tsx | 6 +++--- src/app/features/room/ScheduleMessageModal.tsx | 6 +++--- src/app/features/room/jump-to-time/JumpToTime.tsx | 4 +++- src/app/features/room/message/EditHistoryModal.tsx | 3 +++ src/app/features/room/message/ForwardMessageDialog.tsx | 3 +++ src/app/features/room/message/RemindMeDialog.tsx | 5 +++-- 7 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx index 672a932bb..9c25db403 100644 --- a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx +++ b/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 = (evt) => { @@ -71,7 +73,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) { escapeDeactivates: stopPropagation, }} > - +
(['', '']); 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', - maxWidth: 440, - overflow: 'hidden', + ...modalStyle, }} > {/* Header */} diff --git a/src/app/features/room/ScheduleMessageModal.tsx b/src/app/features/room/ScheduleMessageModal.tsx index 937e08d14..58553eb5a 100644 --- a/src/app/features/room/ScheduleMessageModal.tsx +++ b/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', - maxWidth: 400, - overflow: 'hidden', + ...modalStyle, }} > {/* Header */} diff --git a/src/app/features/room/jump-to-time/JumpToTime.tsx b/src/app/features/room/jump-to-time/JumpToTime.tsx index ef75da4dc..f6e6f188a 100644 --- a/src/app/features/room/jump-to-time/JumpToTime.tsx +++ b/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, }} > - +
{ } 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', - maxWidth: 280, + ...modalStyle, overflow: 'hidden', }} >