fix(mobile): member list no longer opens on top of every room on phones (#175)

Room.tsx showed the MembersDrawer on phone widths whenever the persisted
desktop preference isPeopleDrawer was true — which is the default — so a
new mobile session opened every room behind a full-screen member list.
Mobile now uses a transient mobileMembersPanelAtom (header ⋮ → Members
toggles it, the drawer's X closes it, leaving the room resets it); the
desktop drawer keeps using the setting. Verified with Playwright at 400px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/app/features/room/RoomViewHeader.tsx

@@ -75,6 +75,7 @@ import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 import { webRTCSupported } from '../../utils/rtc';
 import { mediaGalleryAtom } from '../../state/mediaGallery';
 import { widgetsPanelAtom } from '../../state/widgetsPanel';
+import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
 import { threadsListAtom } from '../../state/threadsList';
 import { usePendingKnocks } from '../../hooks/usePendingKnocks';
 import { bookmarksPanelAtom } from '../../state/bookmarksPanel';
@@ -105,7 +106,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
     const [invitePrompt, setInvitePrompt] = useState(false);
     const [reportRoomOpen, setReportRoomOpen] = useState(false);
     const [bookmarksOpen, setBookmarksOpen] = useAtom(bookmarksPanelAtom);
-    const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+    const [mobileMembers, setMobileMembers] = useAtom(mobileMembersPanelAtom);
 
     const handleMarkAsRead = () => {
       markAsRead(mx, room.roomId, hideActivity);
@@ -196,13 +197,13 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
           {screenSize === ScreenSize.Mobile && (
             <MenuItem
               onClick={() => {
-                setPeopleDrawer(!peopleDrawer);
+                setMobileMembers(!mobileMembers);
                 requestClose();
               }}
               size="300"
-              after={<Icon size="100" src={Icons.User} filled={peopleDrawer} />}
+              after={<Icon size="100" src={Icons.User} filled={mobileMembers} />}
               radii="300"
-              aria-pressed={peopleDrawer}
+              aria-pressed={mobileMembers}
             >
               <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
                 Members