From 14913a6447734b69ecef8a1c9c2c928d7835e91d Mon Sep 17 00:00:00 2001 From: npeter83 Date: Mon, 17 Aug 2026 21:06:33 +0200 Subject: [PATCH] =?UTF-8?q?feat(header):=20S7=20=E2=80=94=20container-quer?= =?UTF-8?q?y=20fix=20for=20the=20narrow=20Plex=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The floating header's search box collapsed to ~0 width when the filter sidebar was open on a narrow window (~768px): the content column shrinks with the SIDEBAR, not the viewport, so Tailwind viewport breakpoints can't see it, and SearchBar's `flex-1 min-w-0` shrank rather than wrapped. Fix with Tailwind v4 container queries (no plugin): - App.tsx: mark the content column `@container/appmain` (container-type: inline-size) — the width that actually shrinks when the sidebar opens. - SearchBar: once the column has room (≥420px) enforce a `min-w-[15rem]` floor so the box WRAPS to its own line via the header's flex-wrap instead of collapsing the input; on a narrow column (≤640px) it takes a full line of its own (basis-full) and sorts last, so the small pills (module name + Plex scope toggle / feed sync chip) share the line above it — a tidy two-row header. Verified live at 375 / 768 / 1024 / 1280 on Plex (search usable, scope toggle reachable at every width) and on Feed (shared SearchBar, no regression). Desktop stays a single row. tsc / knip / lint clean. --- frontend/src/App.tsx | 5 ++++- frontend/src/components/SearchBar.tsx | 7 ++++++- 2 files changed, 10 insertions(+), 2 deletions(-) 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() { /> )} -
+ {/* `@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). */} +
{channelView ? ( 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 ( -
+ // `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). +
{leading ?? }