From 36b2b36dd9526ade18e7fbc155621cc50dd7ef84 Mon Sep 17 00:00:00 2001 From: Slava Yultyyev Date: Thu, 18 Jun 2026 11:23:22 -0700 Subject: [PATCH] fix(ui): lift the op-picker modal above its backdrop button so tools are clickable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "New operation" dialog's `.modal-backdrop-button` is `position:absolute; inset:0` (a full-bleed close-on-click target), but `.modal` was unpositioned. A positioned sibling paints above a static one regardless of DOM order, so the transparent backdrop button overlaid every click in the dialog: selecting any tool hit the backdrop's onClose and dismissed the modal instead of opening the tool's form. No form ever mounted — the picker was effectively unusable (the `.modal` stopPropagation was dead code because clicks never reached it). Give `.modal` `position:relative` + `z-index:1` so it stacks above the backdrop button; clicks on the tool buttons now register (the form opens) while clicking the visible backdrop outside the modal still closes it. Verified in a real browser — this is a CSS hit-testing bug jsdom can't model, and the repo has no browser-test harness, so a unit test would pass despite the bug: "+ New op" → Trim now mounts the form, and filling it + Run produces a trim op. --- src/ui/web/src/styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/ui/web/src/styles.css b/src/ui/web/src/styles.css index c7880e2..d862060 100644 --- a/src/ui/web/src/styles.css +++ b/src/ui/web/src/styles.css @@ -228,6 +228,12 @@ body, } .modal { + /* Sit ABOVE the full-bleed .modal-backdrop-button (position:absolute; inset:0). + Without its own stacking position the static modal paints UNDER that + positioned sibling, so every click in the dialog hits the backdrop's + onClose instead of the tool buttons — the picker looks unclickable. */ + position: relative; + z-index: 1; background: #fff; border-radius: 8px; width: 480px;