Make the library page header (title + search bar) fully sticky #14

Merged

kyuno merged 1 commit from feature/library-sticky-header into master

2026-09-16 21:24:15 +02:00

kyuno commented

2026-09-16 19:20:34 +02:00

Owner

Summary

The search bar on views/library was already sticky on its own; the page title above it still scrolled away. They're now wrapped in one .libraryHeader sticky block, so both stay visible together while the grid scrolls underneath.
Scoped to views/library only (.pageHeader is shared with views/home, which stays non-sticky; views/artist/views/album moved to their own hero headers a while back).
On mobile (≤720px), the new header stacks directly below the shell's own sticky top bar instead of overlapping it — .mobileTopBar got a fixed height: var(--mobile-topbar-h) so the library header has something reliable to stack against.

Test plan

npm run typecheck (client) — clean
npm run build (client) — clean
Real compiled app.css + real markup loaded into two independent-viewport <iframe>s (1000px / 375px — this sandbox's resize_window viewport emulation is unreliable), scrolled deep into a grid: title + search bar stay pinned at the top with an opaque background (no tiles showing through) on both sizes, and on the 375px frame the header's top edge lands exactly at the mobile top bar's bottom edge with zero overlap.
Not verified against a real Emby session (no credentials in this sandbox) — the harness above reproduces the real shell/library DOM and CSS instead.

🤖 Generated with Claude Code

## Summary - The search bar on `views/library` was already sticky on its own; the page title above it still scrolled away. They're now wrapped in one `.libraryHeader` sticky block, so both stay visible together while the grid scrolls underneath. - Scoped to `views/library` only (`.pageHeader` is shared with `views/home`, which stays non-sticky; `views/artist`/`views/album` moved to their own hero headers a while back). - On mobile (≤720px), the new header stacks directly below the shell's own sticky top bar instead of overlapping it — `.mobileTopBar` got a fixed `height: var(--mobile-topbar-h)` so the library header has something reliable to stack against. ## Test plan - [x] `npm run typecheck` (client) — clean - [x] `npm run build` (client) — clean - [x] Real compiled `app.css` + real markup loaded into two independent-viewport `<iframe>`s (1000px / 375px — this sandbox's `resize_window` viewport emulation is unreliable), scrolled deep into a grid: title + search bar stay pinned at the top with an opaque background (no tiles showing through) on both sizes, and on the 375px frame the header's top edge lands exactly at the mobile top bar's bottom edge with zero overlap. - Not verified against a real Emby session (no credentials in this sandbox) — the harness above reproduces the real shell/library DOM and CSS instead. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-16 19:20:35 +02:00

Make the library page header (title + search bar) fully sticky

Publier l'image Docker / test (pull_request) Failing after 4s

Details

Publier l'image Docker / publish (pull_request) Has been skipped

Details

3fda483688

The search bar was already sticky on its own; the title above it
still scrolled away. Wraps both in one sticky .libraryHeader block,
scoped to views/library only, and stacks it below the mobile shell's
own sticky top bar instead of racing it for the same spot.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>