peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(header): centre the search-box group over the page content

Browse Source 
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).
This commit is contained in:
peter
2026-08-21 22:08:23 +02:00
parent 53ca4e2849
commit edbc9dede5
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Header.tsx
+6 -4
View File
@@ -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