Fold the connection banner into the notification stack

The offline pill was drawn inside a `flex h-0` container with align-items at
its default stretch, so the pill was stretched to a zero-height box while still
carrying its padding — the "box too small" it was reported as. It is a
persistent notification now, keyed on one id so a poll that keeps confirming
"still offline" replaces the card instead of restacking it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/routes/_layout.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
 
-import { ConnectionBanner } from "@/components/Common/ConnectionBanner"
+import { ConnectionNotice } from "@/components/Common/ConnectionNotice"
 import { Footer } from "@/components/Common/Footer"
 import { useFlowSocket } from "@/components/Flow/useFlowSocket"
 import AppSidebar from "@/components/Sidebar/AppSidebar"
@@ -31,9 +31,9 @@ function Layout() {
     <SidebarProvider className="bg-card">
       <AppSidebar />
       <SidebarInset className="bg-card">
-        {/* Renders nothing unless this page is served through a portal.
-            Inside the inset so it centres over the content, not the window. */}
-        <ConnectionBanner />
+        {/* Draws nothing itself, and nothing at all unless this page is
+            served through a portal: it raises the offline notification. */}
+        <ConnectionNotice />
         {/* The sidebar carries its own collapse control; a phone has no
             sidebar on screen to carry it. */}
         <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 px-4 md:hidden">