fix(header): dynamic --hdr-h so a wrapped mobile header can't overlap content

The floating header pads the content below it by a FIXED `--hdr-h` (4.25rem,
sized for one row). On mobile the flex-wrap header grows to 2–3 rows, so the
content toolbar (sort / count / filter chips) slid up UNDER the header — the top
of the page was a pile of overlapping controls.

- Header.tsx: measure the real header box with a ResizeObserver and publish its
  height (offsetTop + offsetHeight + gap) as `--hdr-h` on the content column, so
  the content pad always tracks the actual (wrapped) header height at any width.
  Verified live at 440 (mobile) and desktop: the toolbar now sits cleanly below
  the header, no overlap; desktop unchanged (still ~4rem, one row).

Also addresses the S7 /code-review findings:
- App.tsx: note that `container-type: inline-size` makes the column a containing
  block for `position: fixed` descendants too (safe today — floating-ui menus
  body-portal, toasts are absolute).
- SearchBar.tsx: move the responsive-rules comment above `return` and note the
  rules are on the SHARED search box (every module, not just Plex).
- SearchBar.dom.test.tsx: lock the container-query classes (min-w floor +
  basis-full/order-last) so the wrap-not-collapse fix can't silently regress.

FE gate: tsc / knip / lint clean, 218 vitest pass.

frontend/src/App.tsx

@@ -353,7 +353,10 @@ export default function App() {
       )}
       {/* `@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). */}
+          can't see the sidebar-driven narrowing (E5 S7). NB: `container-type: inline-size` implies
+          `contain: layout`, making this column a containing block for `position: fixed` descendants
+          too — safe today because floating-ui menus render via FloatingPortal (to document.body) and
+          the toasts below are absolute; keep any new fixed overlay inside here body-portalled. */}
       <div className="@container/appmain relative flex-1 min-w-0 flex flex-col">
         {channelView ? (
           <PageShell scrollKey={`channel:${channelView.id}`}>