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/EmojiPicker.css

@@ -88,3 +88,20 @@
 .emoji-picker-item:hover {
   background: var(--ds-surface-2);
 }
+
+/* The picker is positioned absolutely relative to its trigger button, which
+   can sit close enough to a narrow viewport's edge that the full 320px
+   width runs off-screen (e.g. the composer's emoji trigger, near the left
+   edge, overflows the right edge on a 375px-wide phone). Shrinking the
+   fixed width -- rather than trying to dynamically reposition based on the
+   trigger's actual offset -- is enough margin for every real trigger
+   position in this app. */
+@media (max-width: 480px) {
+  .emoji-picker {
+    width: min(280px, calc(100vw - 32px));
+  }
+
+  .emoji-picker-grid {
+    grid-template-columns: repeat(7, 1fr);
+  }
+}