From d85801122892598f13ed4c19197e9277f851d79e Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Sun, 26 Apr 2026 11:42:09 +0200
Subject: [PATCH] fix(regions): reset backdrop inline z-index on hide so picker
 stays clickable

Bootstrap reuses the same .modal-backdrop element across show/hide cycles.
The previous stacked-modal fix bumped its z-index to 1065 inline but never
cleaned it up, so the next non-stacked open of the picker (e.g. via the
status-bar badge) reused that 1065 backdrop above the default-1055 modal,
covering the entire viewport with an unclickable overlay.

Capture the bumped backdrop reference in onShown and clear its inline
z-index in onHidden alongside the modal's.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/js/app.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index b730437..e1e12ab 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -3007,15 +3007,24 @@ async function openRegionPicker(channelIdx) {
     const modalEl = document.getElementById('regionPickerModal');
     // Stacked-modal fix: when opened on top of Manage Channels, bump z-index so
     // the new backdrop dims the channels modal underneath instead of sliding behind it.
+    // Bootstrap reuses the same backdrop element across show/hide cycles, so we must
+    // also reset its inline z-index on hide — otherwise the next non-stacked open
+    // inherits z-index 1065 and the backdrop ends up above the modal, blocking clicks.
+    let bumpedBackdrop = null;
     const onShown = () => {
         const backdrops = document.querySelectorAll('.modal-backdrop');
         if (backdrops.length > 1) {
             modalEl.style.zIndex = '1075';
-            backdrops[backdrops.length - 1].style.zIndex = '1065';
+            bumpedBackdrop = backdrops[backdrops.length - 1];
+            bumpedBackdrop.style.zIndex = '1065';
         }
     };
     const onHidden = () => {
         modalEl.style.zIndex = '';
+        if (bumpedBackdrop) {
+            bumpedBackdrop.style.zIndex = '';
+            bumpedBackdrop = null;
+        }
         modalEl.removeEventListener('shown.bs.modal', onShown);
         modalEl.removeEventListener('hidden.bs.modal', onHidden);
     };