diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0475ee4b..69bbe884 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -351,7 +351,10 @@ export default function App() {
           />
         </Suspense>
       )}
-      <div className="relative flex-1 min-w-0 flex flex-col">
+      {/* `@container/appmain`: the floating header + its search box adapt to THIS column's width
+          (which shrinks when the filter sidebar is open), not the viewport — a viewport breakpoint
+          can't see the sidebar-driven narrowing (E5 S7). */}
+      <div className="@container/appmain relative flex-1 min-w-0 flex flex-col">
         {channelView ? (
           <PageShell scrollKey={`channel:${channelView.id}`}>
             <Suspense fallback={pageFallback}>
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index d0e92ed1..364bee6a 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -56,7 +56,12 @@ export default function SearchBar({
     if (onGo && !goDisabled) onGo();
   };
   return (
-    <div className="pointer-events-auto relative flex-1 min-w-0 max-w-xl">
+    // `min-w-0` by default so it never forces overflow on a truly tiny column; once the content
+    // column (@container/appmain) has room (≥420px) enforce a usable floor so the box WRAPS to its
+    // own line via the header's flex-wrap instead of shrinking the input to ~0. On a narrow column
+    // (≤640px) it also takes a full line of its own (basis-full) and sorts LAST, so the small pills
+    // (module name + Plex scope toggle) share the line above it — a tidy two-row header (E5 S7).
+    <div className="pointer-events-auto relative flex-1 min-w-0 max-w-xl @min-[420px]/appmain:min-w-[15rem] @max-[640px]/appmain:order-last @max-[640px]/appmain:basis-full">
       <div className="h-11 pl-3 pr-2 rounded-2xl glass-menu flex items-center gap-2 focus-within:outline-2 focus-within:outline-accent/60 focus-within:outline-offset-2">
         {leading ?? <Search className="w-4 h-4 shrink-0 text-muted" />}
         <input