From 282f0c17cd5f7ac343d15177eb3844ae48432193 Mon Sep 17 00:00:00 2001 From: AO Bot Date: Sat, 20 Jun 2026 13:26:19 +0000 Subject: [PATCH] fix(sidebar): make project row hover icons clickable and non-overlapping Three bugs in mc-sidebar.css prevented the project row action icons (dashboard, orchestrator, kebab menu) from working properly: 1. Icons overlap text: padding-right was 78px but 3 icons (24px each) + gaps + offset need ~80px. Bumped to 84px. 2. Icons not clickable: the session count badge faded to opacity:0 on hover but kept pointer-events:auto, intercepting clicks at the icon boundary. Added pointer-events:none. 3. Icons only work on the second project row: the absolute-positioned actions container had no z-index, so session rows (position:relative, later in DOM) painted on top and blocked hover/click. Added z-index:10. Reported by aditi in #bug-triaging. --- packages/web/src/app/mc-sidebar.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/web/src/app/mc-sidebar.css b/packages/web/src/app/mc-sidebar.css index 8e32cc8d41..52885d3721 100644 --- a/packages/web/src/app/mc-sidebar.css +++ b/packages/web/src/app/mc-sidebar.css @@ -140,10 +140,11 @@ } /* On hover the action icons reveal over the right slot — reserve room so the - project name re-truncates (ellipsis) instead of running under the icons. */ + project name re-truncates (ellipsis) instead of running under the icons. + 3 icons × 24px + 2 gaps × 1px + 6px right offset = 80px; pad a bit more. */ .project-sidebar__proj-row:hover .project-sidebar__proj-toggle, .project-sidebar__proj-row:focus-within .project-sidebar__proj-toggle { - padding-right: 78px; + padding-right: 84px; } .project-sidebar__proj-toggle:hover { @@ -191,6 +192,7 @@ .project-sidebar__proj-row:hover .project-sidebar__proj-count, .project-sidebar__proj-row:focus-within .project-sidebar__proj-count { opacity: 0; + pointer-events: none; } /* ── Per-project action icons — out of flow, revealed on hover ────────── */ @@ -205,6 +207,10 @@ opacity: 0; pointer-events: none; transition: opacity 0.12s ease; + /* z-index ensures icons paint above sibling session rows that come later + in the DOM and have position: relative (which would otherwise stack on + top and intercept hover/click events over the action icons). */ + z-index: 10; } .project-sidebar__proj-row:hover .project-sidebar__proj-actions,