feat(header): S7 — container-query fix for the narrow Plex header
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.
This commit is contained in:
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user