diff --git a/src/app/components/UserRoomProfileRenderer.tsx b/src/app/components/UserRoomProfileRenderer.tsx index ca7aa837e..4cef36762 100644 --- a/src/app/components/UserRoomProfileRenderer.tsx +++ b/src/app/components/UserRoomProfileRenderer.tsx @@ -1,5 +1,19 @@ import React from 'react'; -import { Menu, PopOut, toRem } from 'folds'; +import { + Box, + Header, + Icon, + IconButton, + Icons, + Menu, + Modal, + Overlay, + OverlayBackdrop, + OverlayCenter, + PopOut, + config, + toRem, +} from 'folds'; import FocusTrap from 'focus-trap-react'; import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile'; import { UserRoomProfile } from './user-profile'; @@ -8,6 +22,20 @@ import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom'; import { stopPropagation } from '../utils/keyboard'; import { SpaceProvider } from '../hooks/useSpace'; import { RoomProvider } from '../hooks/useRoom'; +import { ScreenSize, useScreenSize } from '../hooks/useScreenSize'; + +// Matches useModalStyle's mobile branch: fill the phone screen with internal +// scroll so tall profiles (moderation actions, device list, notes) are fully +// reachable — the anchored 340px popout below can't scroll and clipped them. +const MOBILE_FULLSCREEN = { + width: '100%', + height: '100%', + maxWidth: '100%', + maxHeight: '100%', + borderRadius: 0, + display: 'flex', + flexDirection: 'column', +} as const; function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) { const { roomId, spaceId, userId, cords, position } = state; @@ -15,32 +43,61 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) const getRoom = useGetRoom(allJoinedRooms); const room = getRoom(roomId); const space = spaceId ? getRoom(spaceId) : undefined; + const screenSize = useScreenSize(); const close = useCloseUserRoomProfile(); if (!room) return null; + const profile = ( + + + + + + ); + + const focusTrapOptions = { + initialFocus: false, + onDeactivate: close, + clickOutsideDeactivates: true, + escapeDeactivates: stopPropagation, + }; + + // On phones, render as a full-screen scrollable modal instead of an anchored, + // fixed-width, unscrollable popout. + if (screenSize === ScreenSize.Mobile) { + return ( + }> + + + + {/* Full-screen covers the backdrop (no tap-to-dismiss) and the + profile has no self-close, so provide an explicit close. */} +
+ + + + +
+ + {profile} + +
+
+
+
+ ); + } + return ( - - - - - - - + + {profile} } /> diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx index 469b49c01..88d2655ff 100644 --- a/src/app/features/common-settings/permissions/PowersEditor.tsx +++ b/src/app/features/common-settings/permissions/PowersEditor.tsx @@ -119,7 +119,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) { return ( - + Color