From edbc9dede55db7ffb697e4551e7d6506a2abf8ce Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 21 Aug 2026 22:08:23 +0200
Subject: [PATCH] style(header): centre the search-box group over the page
 content

The floating header band already centres on --content-mw (the width the
page's cards use), but its search box + scope-toggle/sync-chip group was
packed to the left edge (default justify-start), leaving it offset from
the centred card grid on max-width pages (Plex/Channels/Playlists).

Add justify-center to the band so the group centres within it: once the
column is wider than the box's max-w, the box sits centred over the
cards instead of hugging the left edge. Shared header row, so it applies
to every module with a SearchBar. Verified at 1920px on Plex: group
centre == content-band centre (431px margin each side).
---
 frontend/src/components/Header.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 771dd8de..d373b7ae 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -90,10 +90,12 @@ const Header = forwardRef<
     <div
       ref={ref}
       // left-4 / right = 1rem + the scrollbar gutter defines the full content column; max-w-[--content-mw]
-      // + mx-auto then centres the header on the SAME width the page's content uses, so on a max-width page
-      // (Plex/Channels/Playlists) the header lines up with the centred grid, not the whole column. `none`
-      // (feed) = full width. Matches the toolbar band below it.
-      className="pointer-events-none absolute top-3 left-4 right-[calc(1rem+var(--sbw))] mx-auto max-w-[var(--content-mw,none)] z-chrome flex flex-wrap items-center gap-x-3 gap-y-2"
+      // + mx-auto then centres the header band on the SAME width the page's content uses, so on a max-width
+      // page (Plex/Channels/Playlists) the band lines up with the centred grid, not the whole column. `none`
+      // (feed) = full width. Matches the toolbar band below it. `justify-center` then centres the search-box
+      // group (search + scope toggle / sync chip) within that band, so the box sits centred over the cards
+      // once the column is wider than the box's max-w — not hugged to the left edge.
+      className="pointer-events-none absolute top-3 left-4 right-[calc(1rem+var(--sbw))] mx-auto max-w-[var(--content-mw,none)] z-chrome flex flex-wrap items-center justify-center gap-x-3 gap-y-2"
     >
       {search}
       {/* Library scope (movie/show/both) sits right of the search box on Plex — relocated here from