Fix mobile display: RoomInfoPanel inaccessible, emoji picker overflow

RoomInfoPanel was hard-gated behind !isMobile in ChatShellPage.tsx, but
its trigger button ("Room details" in ChatPane.tsx) still rendered and
toggled state unconditionally -- tapping it on mobile did nothing
visible, with no way to reach room info/members/settings at all. Fixed
by removing the gate and making the panel itself responsive: it renders
as a full-screen fixed overlay below the mobile breakpoint instead of
the desktop resizable aside (which stays exactly as before -- verified
in-browser at both viewport sizes).

Also found and fixed a second real bug during the mobile audit: the
emoji picker's fixed 320px width overflows a 375px-wide viewport by 5px
depending on trigger position (e.g. the composer's emoji button, near
the left edge). Shrunk it to 280px with a proportionally reduced column
count below 480px, rather than attempting dynamic position-aware sizing
for a 5px overflow.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/RoomInfoPanel.css

@@ -28,6 +28,23 @@
   background: color-mix(in srgb, var(--ds-accent) 40%, transparent);
 }
 
+/* Below MOBILE_BREAKPOINT (frontend/src/hooks/useWindowWidth.ts), the
+   resizable-aside layout doesn't fit -- shown as a full-viewport overlay
+   instead. RoomInfoPanel.tsx skips its inline `style={{ width }}` on
+   mobile so this width rule isn't fighting an inline style, which would
+   otherwise win regardless of this media query's specificity. */
+@media (max-width: 859px) {
+  .room-info-panel {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    border-left: none;
+  }
+}
+
 .room-info-header {
   display: flex;
   justify-content: space-between;