kyuno/watchparty
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Fix library tile buttons rendering above the sticky header while scrolling #18

Merged
kyuno merged 2 commits from fix/library-header-zindex into master 2026-09-16 22:41:28 +02:00
Conversation 0 Commits 2 Files changed 4 +56 -2
kyuno commented 2026-09-16 22:37:34 +02:00
Owner
Copy link

Summary

  • .libraryHeader and the alphabet index's .letterHeading both copied their z-index: 2 from tiles.css's pre-existing sticky .searchBar — which never showed this problem in practice, since a single slim input has little vertical range to actually overlap a scrolling tile mid-transition.
  • A tile's own .tileOverlay (its action buttons — always-visible on a touch device, not just hover-revealed) is also z-index: 2. Equal z-index ties toward whichever renders later in the DOM — a tile, inside #grid, always after the header. Wrapping the old slim search bar into the much taller combined header gave a scrolling tile far more room to pass directly underneath before fully clearing it, which is what actually surfaced the tie.
  • Fix: raise both to z-index: 3, matching shell/Shell.css's own .mobileTopBar.

Test plan

  • npm run typecheck (client) — clean
  • npm run build (client) — clean
  • Confirmed as a real, reproducible regression, not just reasoned about: real compiled CSS loaded into a page with a real .grid of tiles (their .tileOverlay forced visible), scrolled so a tile genuinely overlapped the header's rect, then read the actual paint order with elementsFromPoint at that point — with the header's z-index forced back to the old 2, .tileOverlay topped the stack exactly as reported; restored to 3, the header topped it instead, with .tileOverlay three layers down and unreachable.

🤖 Generated with Claude Code

## Summary - `.libraryHeader` and the alphabet index's `.letterHeading` both copied their `z-index: 2` from `tiles.css`'s pre-existing sticky `.searchBar` — which never showed this problem in practice, since a single slim input has little vertical range to actually overlap a scrolling tile mid-transition. - A tile's own `.tileOverlay` (its action buttons — always-visible on a touch device, not just hover-revealed) is *also* `z-index: 2`. Equal z-index ties toward whichever renders later in the DOM — a tile, inside `#grid`, always after the header. Wrapping the old slim search bar into the much taller combined header gave a scrolling tile far more room to pass directly underneath before fully clearing it, which is what actually surfaced the tie. - Fix: raise both to `z-index: 3`, matching `shell/Shell.css`'s own `.mobileTopBar`. ## Test plan - [x] `npm run typecheck` (client) — clean - [x] `npm run build` (client) — clean - [x] Confirmed as a real, reproducible regression, not just reasoned about: real compiled CSS loaded into a page with a real `.grid` of tiles (their `.tileOverlay` forced visible), scrolled so a tile genuinely overlapped the header's rect, then read the actual paint order with `elementsFromPoint` at that point — with the header's z-index forced back to the old `2`, `.tileOverlay` topped the stack exactly as reported; restored to `3`, the header topped it instead, with `.tileOverlay` three layers down and unreachable. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
kyuno added 1 commit 2026-09-16 22:37:34 +02:00
Fix library tile buttons rendering above the sticky header while scrolling
Some checks failed
Publier l'image Docker / test (pull_request) Failing after 4s
Details
Publier l'image Docker / publish (pull_request) Has been skipped
Details
d23fcc028b 
.libraryHeader and the alphabet index's .letterHeading copied their
z-index: 2 from tiles.css's own pre-existing sticky .searchBar - which
never showed the problem in practice, since a single slim input has
little room to actually overlap a scrolling tile. A tile's own
.tileOverlay action buttons are also z-index: 2 though, and an equal
z-index ties toward whichever renders later in the DOM - a tile, always
after the header. Wrapping the header into a much taller block gave a
scrolling tile far more room to pass underneath before fully clearing
it, which is what actually surfaced the tie. Raised both to z-index: 3,
matching shell/Shell.css's own mobileTopBar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
kyuno added 1 commit 2026-09-16 22:41:24 +02:00
Merge remote-tracking branch 'origin/master' into fix/library-header-zindex
Some checks failed
Publier l'image Docker / test (pull_request) Failing after 4s
Details
Publier l'image Docker / publish (pull_request) Has been skipped
Details
f923fa24e7 
# Conflicts:
#	README.md
#	docs/architecture.md
kyuno merged commit fa9d87b130 into master 2026-09-16 22:41:28 +02:00
kyuno deleted branch fix/library-header-zindex 2026-09-16 22:41:29 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: kyuno/watchparty#18
No description provided.
Delete branch "fix/library-header-zindex"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?