book(fix): tile action buttons + page-number chip always on top

The X / duplicate / proof / master-picker chrome on Pages overview
tiles was rendering behind the composited master+page thumbnail
because text layers carry their own zIndex inline (layer.z) and
the actions container had no stacking context.

- .bookPageTileActions gains z-index: 20 and the per-button
  children + master <select> get z-index: 21 with position:
  relative so they create their own stacking contexts (necessary
  for the select to dropdown above neighbouring tiles too).
- .bookPageTileNum gains z-index: 10 + a translucent white
  background so the page-number chip stays legible over dark
  text layers.

Reported: "the X button on the pages overview slide is behind
the master content. The pages buttons like the X should always
be rendered on top so the user can see them."

Co-Authored-By: Claude Opus 4.7 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.7 committed 2026-06-03 18:35:42 -04:00
1 parent 5caf1d48cd
commit e5721b67a7
1 file changed
+6
+6
View File
@@ -1800,6 +1800,9 @@
.bookPageTileNum {
position: absolute; top: 6px; left: 8px;
font-size: .72rem; color: var(--muted); font-weight: 600;
z-index: 10;
background: rgba(255,255,255,.85);
padding: 0 4px; border-radius: 2px;
}
/* Master layers shown as an underlay while editing a page —
click-through and slightly faded so the page layers above
@@ -1848,12 +1851,14 @@
position: absolute; top: 4px; right: 4px;
display: flex; gap: 4px;
opacity: 0; transition: opacity .12s;
z-index: 20; /* always above the composited preview's text layers */
}
.bookPageTile:hover .bookPageTileActions { opacity: 1; }
.bookPageTileAction {
width: 22px; height: 22px; padding: 0; border-radius: 0;
border: 1px solid var(--line); background: #fff;
cursor: pointer; font-size: .85rem; line-height: 1;
position: relative; z-index: 21;
}
.bookPageTileAction.danger:hover {
background: var(--warn, #fee2e2);
@@ -1863,6 +1868,7 @@
height: 22px; padding: 0 4px; font-size: .72rem;
border: 1px solid var(--line); background: #fff;
max-width: 120px;
position: relative; z-index: 21;
}
.bookPageTile.dragging { opacity: .5; }
.bookPageTile.dragover {