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/shared/guild-picker.tsx

@@ -41,7 +41,7 @@ export function GuildChannelPicker({
   }));
 
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
       <Select
         value={g}
         onChange={(v) => {
@@ -52,7 +52,7 @@ export function GuildChannelPicker({
         options={guildOpts}
         placeholder="Guild"
         size="sm"
-        className="w-44"
+        className="w-full sm:w-44"
       />
       <Select
         value={c}
@@ -63,7 +63,7 @@ export function GuildChannelPicker({
         options={channelOpts}
         placeholder={mode === "voice" ? "Voice channel" : "Text channel"}
         size="sm"
-        className="w-52"
+        className="w-full sm:w-52"
       />
     </div>
   );

services/frontend/src/components/shared/section.tsx

@@ -12,12 +12,12 @@ export function SectionHeader({
   className?: string;
 }) {
   return (
-    <div className={cn("mb-3 flex items-end justify-between gap-3", className)}>
+    <div className={cn("mb-3 flex flex-wrap items-start justify-between gap-2 sm:gap-3", className)}>
       <div className="min-w-0">
         {eyebrow && <div className="eyebrow mb-1">{eyebrow}</div>}
         <h2 className="display text-xl text-ink">{title}</h2>
       </div>
-      {action}
+      {action && <div className="flex flex-wrap items-center gap-2">{action}</div>}
     </div>
   );
 }