From e5721b67a78cb8e985f74dc30bc1530d4436baa6 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 3 Jun 2026 18:35:42 -0400
Subject: [PATCH] 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 <noreply@anthropic.com>
---
 src/index.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/index.html b/src/index.html
index 574a21c..09eb77b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -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 {