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 (
-
+
+
}
/>
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