Fix command palette results being unclickable

The backdrop div was nested inside .modal instead of rendered as its
sibling. Tabler/Bootstrap's backdrop (z-index 1050) is only supposed
to sit below the modal (z-index 1055) because normally they're both
direct children of the same stacking context; nesting it inside
.modal instead made it establish z-index inside .modal's own stacking
context, where it painted on top of .modal-dialog and silently
absorbed every click meant for a result row (confirmed via
elementFromPoint in a real browser: clicking a result hit
.modal-backdrop, not the result div). Moved the backdrop to be a
sibling rendered before .modal, matching the structure elementFromPoint
now confirms resolves to the actual result element.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bobbanandClaude Sonnet 5 committed 2026-09-20 23:02:55 +02:00
1 parent 5c1376cf1c
commit 9c07718d2d
1 file changed
+8 -1
+8 -1
View File
@@ -192,6 +192,13 @@ export default function CommandPalette() {
let lastCategory = "";
return (
<>
{/* Rendered as a sibling, not a child, of .modal — Tabler/Bootstrap's z-index values
(backdrop 1050 vs modal 1055) only sort correctly when compared in the same
stacking context. Nested inside .modal, the backdrop was created its own stacking
context and painted on top of .modal-dialog, silently swallowing every click meant
for a result row. */}
<div className="modal-backdrop show"></div>
<div className="modal modal-blur show" style={{ display: "block" }} onClick={() => setOpen(false)}>
<div className="modal-dialog modal-dialog-centered" style={{ maxWidth: 600 }} onClick={(e) => e.stopPropagation()}>
<div className="modal-content">
@@ -242,7 +249,7 @@ export default function CommandPalette() {
</div>
</div>
</div>
<div className="modal-backdrop show"></div>
</div>
</>
);
}