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>
This commit is contained in:
2026-06-18 18:11:24 -04:00
parent 3df95adc52
commit 176d5d0bb7
8 changed files with 26 additions and 10 deletions
@@ -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}`,