Nicolas
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>
35 lines
1.6 KiB
CSS
35 lines
1.6 KiB
CSS
/* ---- Library page header (title + search bar) - see Library.ts/html. ----
|
|
Wraps .pageHeader and tiles.css's .searchBar (already sticky on its own)
|
|
in one sticky block so the title stays put too, instead of scrolling
|
|
away while the search bar stays behind - reported directly. Needs its
|
|
own opaque background since .pageHeader's <h1> has none - without it,
|
|
grid tiles scrolling underneath would show through the title text once
|
|
stuck. */
|
|
.libraryHeader {
|
|
position: sticky;
|
|
top: 0;
|
|
/* Above 2, not just tiles.css's own .searchBar precedent: a tile's
|
|
.tileOverlay action buttons are ALSO z-index: 2, and (unlike the
|
|
slim .searchBar this header replaced) this header is tall enough
|
|
that a scrolling tile's own overlay - always-visible on touch, see
|
|
tiles.css's (hover: none) block - reaches it well before it's fully
|
|
scrolled past. Equal z-index ties break on paint order, and a tile
|
|
(inside #grid, after this header in the DOM) wins that tie -
|
|
reported directly as buttons rendering over the header while
|
|
scrolling. z-index: 3 matches shell/Shell.css's own .mobileTopBar,
|
|
the other sticky header this one already has to stack correctly
|
|
under on mobile. */
|
|
z-index: 3;
|
|
background: var(--bg);
|
|
padding-top: 4px;
|
|
}
|
|
|
|
/* Below 720px, shell/Shell.css's own sticky .mobileTopBar already occupies
|
|
top:0 - stacking this header at top:0 too would have both fighting over
|
|
the same spot, with this one (later in paint order) covering the app's
|
|
brand bar. Stick it right below instead. */
|
|
@media (max-width: 720px) {
|
|
.libraryHeader {
|
|
top: var(--mobile-topbar-h);
|
|
}
|
|
}
|