From 967b30f8e0855c059c049ef39918a8097726fa9b Mon Sep 17 00:00:00 2001
From: Ken <ken@kenotron.com>
Date: Thu, 28 May 2026 00:15:59 +0000
Subject: [PATCH] fix: prevent hover preview popover from intercepting sidebar
 tile clicks

Added pointer-events: none to .preview-popover CSS so clicks fall through to tiles below.
Removed e.stopPropagation() from capture-phase document click handler to prevent event
interception. Changed dispatched event from preview-click to preview-close (cleanup only).
Updated app.js event listener to match.

The hover preview overlay (position: fixed, z-index: 300) was intercepting clicks meant
for sidebar tiles. Its capture-phase click handler called stopPropagation(), killing the
event before the sidebar tile's click handler could fire, then dispatched openSession()
with the hovered session name instead of the clicked one.

Generated with Amplifier

Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
---
 muxplex/frontend/app.js                      | 12 +++++-------
 muxplex/frontend/components/hover-preview.js | 13 ++++++++-----
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js
index 281d75a..bdb036e 100644
--- a/muxplex/frontend/app.js
+++ b/muxplex/frontend/app.js
@@ -3999,16 +3999,14 @@ function bindStaticEventListeners() {
     });
   }
 
-  // Hover preview — component handles click internally; listen for preview-click
+  // Hover preview — component dispatches preview-close when any click dismisses it.
+  // pointer-events:none on the popover means the underlying element (e.g. a
+  // sidebar tile) receives the click and handles navigation itself; this handler
+  // only needs to clean up the timer / session-name state.
   var hoverPreview = $('hover-preview');
   if (hoverPreview) {
-    hoverPreview.addEventListener('preview-click', function(e) {
+    hoverPreview.addEventListener('preview-close', function() {
       hidePreview();
-      var name = e.detail.name;
-      if (name) {
-        var session = _currentSessions && _currentSessions.find(function(s) { return s.name === name; });
-        openSession(name, { remoteId: (session != null && session.remoteId != null) ? session.remoteId : '' });
-      }
     });
   }
 
diff --git a/muxplex/frontend/components/hover-preview.js b/muxplex/frontend/components/hover-preview.js
index 8383b87..e8da0c4 100644
--- a/muxplex/frontend/components/hover-preview.js
+++ b/muxplex/frontend/components/hover-preview.js
@@ -34,7 +34,8 @@ export class HoverPreview extends LitElement {
       border-radius: 8px;
       overflow: auto;
       padding: 12px;
-      cursor: pointer;
+      cursor: default;
+      pointer-events: none;   /* clicks pass through to sidebar tiles below */
     }
     .preview-popover pre {
       margin: 0;
@@ -74,11 +75,13 @@ export class HoverPreview extends LitElement {
   }
 
   _onDocumentClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.dispatchEvent(new CustomEvent('preview-click', {
+    // Close the preview. Do NOT call stopPropagation() — that would swallow
+    // clicks intended for sidebar tiles and other elements behind the preview.
+    // pointer-events:none on .preview-popover lets clicks reach their real
+    // target; this handler just ensures the overlay is dismissed in sync.
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('preview-close', {
       bubbles: true, composed: true,
-      detail: { name: this.sessionName },
     }));
   }