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>
   );