fix(frontend): responsive layout across all dashboard pages

- SectionHeader: action (filters/legends) now wraps below the title on narrow
  screens instead of overflowing beside it (flex-wrap, gap-2 sm:gap-3).
- GuildChannelPicker: selects go full-width and stack on mobile (w-full
  sm:w-44 / sm:w-52) instead of fixed widths that exceeded a 375px viewport.
- Messages search: w-full sm:w-64 so it doesn't crowd the picker on mobile.
- TopBar: tighter padding (px-4 sm:px-5), smaller title on mobile, connection
  status uses compact (dot only) on mobile, ambient pill hidden < sm.
- Shell main + dashboard channel label: responsive padding / shrink-0 widths.

Verified tsc --noEmit + next build clean; targets breakpoints 375/768/1024/1440.

services/frontend/src/components/shell/ambient-app.tsx

@@ -12,7 +12,7 @@ export function AppFrame({ children }: { children: React.ReactNode }) {
       <NavRail />
       <div className="flex min-w-0 flex-1 flex-col">
         <TopBar />
-        <main className="min-h-0 flex-1 overflow-y-auto px-5 pb-8">
+        <main className="min-h-0 flex-1 overflow-y-auto px-4 pb-8 sm:px-5">
           {children}
         </main>
       </div>

services/frontend/src/components/shell/topbar.tsx

@@ -32,20 +32,20 @@ export function TopBar() {
         : "text-signal";
 
   return (
-    <header className="sticky top-0 z-40 flex items-center gap-4 px-5 py-3.5">
-      <div className="flex min-w-0 items-baseline gap-3">
-        <span className="eyebrow">GMW</span>
-        <h1 className="display truncate text-[1.5rem] text-ink">{label}</h1>
+    <header className="sticky top-0 z-40 flex items-center gap-3 px-4 py-3 sm:gap-4 sm:px-5 sm:py-3.5">
+      <div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
+        <span className="eyebrow hidden sm:inline">GMW</span>
+        <h1 className="display truncate text-[1.25rem] text-ink sm:text-[1.5rem]">{label}</h1>
       </div>
 
-      <div className="ml-auto flex items-center gap-3">
-        <span className={cn("pill", signalTone)}>
+      <div className="ml-auto flex items-center gap-2 sm:gap-3">
+        <span className={cn("pill hidden sm:flex", signalTone)}>
           <span
             className={cn("size-1.5 rounded-full bg-current animate-breathe")}
           />
           {state.label ?? "nominal"}
         </span>
-        <ConnectionStatus />
+        <ConnectionStatus compact />
         <button
           type="button"
           aria-label="Open command palette"