diff --git a/web/src/components/CommandPalette.tsx b/web/src/components/CommandPalette.tsx
index 47641a6..1bda77f 100644
--- a/web/src/components/CommandPalette.tsx
+++ b/web/src/components/CommandPalette.tsx
@@ -192,57 +192,64 @@ export default function CommandPalette() {
   let lastCategory = "";
 
   return (
-    <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">
-          <div className="modal-body p-0">
-            <div className="p-2 border-bottom">
-              <div className="input-icon">
-                <span className="input-icon-addon">
-                  <IconSearch size={18} />
-                </span>
-                <input
-                  ref={inputRef}
-                  type="text"
-                  className="form-control form-control-lg border-0"
-                  placeholder="Search servers, DNS, secrets, IPs, integrations…"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                />
+    <>
+      {/* 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">
+            <div className="modal-body p-0">
+              <div className="p-2 border-bottom">
+                <div className="input-icon">
+                  <span className="input-icon-addon">
+                    <IconSearch size={18} />
+                  </span>
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    className="form-control form-control-lg border-0"
+                    placeholder="Search servers, DNS, secrets, IPs, integrations…"
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    onKeyDown={handleInputKeyDown}
+                  />
+                </div>
               </div>
-            </div>
-            <div style={{ maxHeight: "60vh", overflowY: "auto" }}>
-              {loading && <div className="p-3 text-secondary">Searching…</div>}
-              {!loading && query.trim().length >= 2 && items.length === 0 && <div className="p-3 text-secondary">No matches.</div>}
-              {!loading && query.trim().length < 2 && <div className="p-3 text-secondary">Type at least 2 characters…</div>}
-              {items.map((item, index) => {
-                const showHeader = item.category !== lastCategory;
-                lastCategory = item.category;
-                return (
-                  <div key={item.key}>
-                    {showHeader && (
-                      <div className="px-3 pt-2 pb-1 text-uppercase text-secondary" style={{ fontSize: "0.7rem" }}>
-                        {item.category}
+              <div style={{ maxHeight: "60vh", overflowY: "auto" }}>
+                {loading && <div className="p-3 text-secondary">Searching…</div>}
+                {!loading && query.trim().length >= 2 && items.length === 0 && <div className="p-3 text-secondary">No matches.</div>}
+                {!loading && query.trim().length < 2 && <div className="p-3 text-secondary">Type at least 2 characters…</div>}
+                {items.map((item, index) => {
+                  const showHeader = item.category !== lastCategory;
+                  lastCategory = item.category;
+                  return (
+                    <div key={item.key}>
+                      {showHeader && (
+                        <div className="px-3 pt-2 pb-1 text-uppercase text-secondary" style={{ fontSize: "0.7rem" }}>
+                          {item.category}
+                        </div>
+                      )}
+                      <div
+                        className={`px-3 py-2 d-flex justify-content-between align-items-center gap-3 ${index === activeIndex ? "bg-secondary-lt" : ""}`}
+                        style={{ cursor: "pointer" }}
+                        onMouseEnter={() => setActiveIndex(index)}
+                        onClick={() => go(item)}
+                      >
+                        <div className="text-truncate">{item.title}</div>
+                        {item.subtitle && <div className="text-secondary small text-truncate">{item.subtitle}</div>}
                       </div>
-                    )}
-                    <div
-                      className={`px-3 py-2 d-flex justify-content-between align-items-center gap-3 ${index === activeIndex ? "bg-secondary-lt" : ""}`}
-                      style={{ cursor: "pointer" }}
-                      onMouseEnter={() => setActiveIndex(index)}
-                      onClick={() => go(item)}
-                    >
-                      <div className="text-truncate">{item.title}</div>
-                      {item.subtitle && <div className="text-secondary small text-truncate">{item.subtitle}</div>}
                     </div>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div className="modal-backdrop show"></div>
-    </div>
+    </>
   );
 }