fix(media-gallery): dock as a flex sibling like MembersDrawer (was floating)

The real reason the gallery didn't look or function like the Members drawer
or Saved Messages: it was a position:fixed overlay floating over the timeline,
mounted from RoomViewHeader. Now it docks into the room layout row exactly like
MembersDrawer.

- new mediaGalleryAtom (mirrors bookmarksPanelAtom) holds the open state
- RoomViewHeader toggles the atom instead of local useState and no longer
  renders the panel
- Room.tsx renders <MediaGallery> as a flex sibling of the timeline with a
  vertical Line separator on desktop and key={room.roomId} to reset per room
- MediaGallery.css: static width on desktop, position:fixed inset:0 full-screen
  only on mobile (identical strategy to MembersDrawer.css); root Box shrink="No"

The panel now shares the row with the timeline instead of overlapping it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room/MediaGallery.css.ts

@@ -1,24 +1,20 @@
 import { style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
-// Right-side drawer that floats over the room view. 320px is wider than the
-// 266px member/bookmark drawers because it hosts a media grid; on narrow
-// viewports it expands to fill the screen, matching the app's other drawers.
+// Right-side drawer DOCKED into the room layout row (a flex sibling of the
+// timeline), exactly like MembersDrawer — not a floating overlay. 320px is a
+// little wider than the 266px member/bookmark drawers because it hosts a media
+// grid. On narrow viewports it becomes a full-screen fixed panel, matching the
+// app's other drawers.
 export const MediaGalleryDrawer = style({
-  position: 'fixed',
-  top: 0,
-  right: 0,
-  bottom: 0,
   width: toRem(320),
-  zIndex: 500,
   overflow: 'hidden',
-  borderLeftWidth: config.borderWidth.B300,
-  borderLeftStyle: 'solid',
-  borderLeftColor: color.Background.ContainerLine,
   '@media': {
     '(max-width: 750px)': {
+      position: 'fixed',
+      inset: 0,
       width: '100%',
-      borderLeftWidth: 0,
+      zIndex: 500,
     },
   },
 });