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.tsx

@@ -20,6 +20,7 @@ import {
 } from '../api/webhooks'
 import { useAuth } from '../context/AuthContext'
 import { useResizableWidth } from '../hooks/useResizableWidth'
+import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
 import type {
   EventSubscription,
   EventType,
@@ -57,6 +58,8 @@ export function RoomInfoPanel({
 }: RoomInfoPanelProps) {
   const { user } = useAuth()
   const myRole = room.role
+  const windowWidth = useWindowWidth()
+  const isMobile = windowWidth < MOBILE_BREAKPOINT
   const { width, startResize } = useResizableWidth({
     storageKey: 'room-info-panel-width',
     defaultWidth: 260,
@@ -231,8 +234,8 @@ export function RoomInfoPanel({
   }
 
   return (
-    <aside className="room-info-panel" style={{ width }}>
-      <div className="room-info-resize-handle" onPointerDown={startResize} />
+    <aside className="room-info-panel" style={isMobile ? undefined : { width }}>
+      {!isMobile && <div className="room-info-resize-handle" onPointerDown={startResize} />}
       <div className="room-info-header">
         <span className="room-info-header-label">Details</span>
         <button type="button" className="room-info-close" onClick={onClose} aria-label="Close">