feat: responsive mobile layout with slide-over sidebar

On screens ≤600px the sidebar collapses off-screen. A hamburger button
in the message header opens it as a slide-over drawer with a dim
overlay; tapping a room/network or the ✕ button closes it. Desktop
layout is unchanged.

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

web/src/components/MessagePane.tsx

@@ -12,7 +12,7 @@ function formatTs(ts: number): string {
   return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + time
 }
 
-export function MessagePane() {
+export function MessagePane({ onMenuClick }: { onMenuClick: () => void }) {
   const { messages, historyCutoff, activeRoom, activeNetworkId, localPeer, connectedPeers, knownPeers, send } = useWaste()
   const [draft, setDraft] = useState('')
   const bottomRef = useRef<HTMLDivElement>(null)
@@ -64,7 +64,10 @@ export function MessagePane() {
 
   return (
     <main className="message-pane">
-      <div className="message-pane-header">{roomLabel}</div>
+      <div className="message-pane-header">
+        <button className="menu-btn-mobile" onClick={onMenuClick} aria-label="Menu">☰</button>
+        {roomLabel}
+      </div>
 
       <div className="messages">
         {dividerIdx === 0 && (