fix(diagnostics): stop panel from being unclickable and add outside-click dismiss (lr-b580)#299
Merged
clagentic-merger[bot] merged 1 commit intoJul 1, 2026
Conversation
…lick dismiss (lr-b580) Root cause: #diagnostics-panel lives inside #info-panels, a fixed, viewport-spanning, pointer-events:none container that sibling panels (#usage-panel, #status-panel, #context-panel, #team-panel) opt back into via a shared pointer-events:auto selector. lr-8294 added the diagnostics panel to the DOM/CSS but never added it to that selector, so it inherited pointer-events:none -- the panel itself, including its own X button, became fully unclickable. Fixes: - menus.css: add #diagnostics-panel to the shared pointer-events:auto and .hidden selectors alongside its sibling panels. - diagnostics.js: add a document click-outside listener (mirroring the existing configPopover pattern in app-panels.js) so the panel is dismissable without a dedicated backdrop element, routed through the existing closePanelAndRefocus() helper so focus restoration stays consistent with the Escape-key and close-button paths. Regression coverage: test/diagnostics-panel-pointer-events-lr-b580.test.js (source-text assertions, matching the project's existing DOM-harness-free convention). npm test: 597 tests, 596 pass, 1 fail -- pre-existing process-level exit code quirk noted by andy on lr-1a26 (all individual TAP subtests report ok, including the 5 new ones added here).
![clagentic-reviewer[bot]](https://avatars.githubusercontent.com/in/3944489?s=60&v=4){kind=small}
There was a problem hiding this comment.
PEACHES — clean
Summary
- lib/public/css/menus.css (lines 672, 681): Added
#diagnostics-panelto both thepointer-events: autoselector and the.hiddendisplay rule. This fixes the root cause: the panel was inheritingpointer-events: nonefrom its parent (#info-panels) and becoming unclickable (lr-8294 regression). - lib/public/modules/diagnostics.js (lines 73-81): Added document-level click-outside listener that dismisses the panel when clicks land outside the panel and its toggle button, mirroring the configPopover pattern in app-panels.js. Reuses closePanelAndRefocus() for consistent focus restoration across all dismiss paths (Escape, close button, click-outside).
- test/diagnostics-panel-pointer-events-lr-b580.test.js: Five source-text regression tests covering the CSS selectors and click-outside handler logic. Follows the project's existing convention (xss-escape.test.js, server-settings-mobile-parity).
Checks
✓ CSS selectors include diagnostics-panel alongside sibling panels
✓ Click-outside handler guards against clicks on the panel itself and its toggle button
✓ Click-outside handler calls closePanelAndRefocus() for WCAG 2.1 §2.4.3 focus restoration (consistent with Escape and close-button paths)
✓ Regression tests are specific, isolated, and follow project convention
✓ No new dependencies, hardcoded paths, or brand rule violations
Contributor
clagentic gate-note — authorized
Authorize rationale: PEACHES clean (review 4612782553); BOBBIE not required (frontend-only css/js+test, lr-8294 precedent); CI green at HEAD; authorized by holden per lr-b580 |
clagentic-merger
Bot
deleted the
fix/lr-b580-diagnostics-panel-pointer-trap
branch
|
This issue has been resolved in version 1.6.0-beta.2 (beta). To update, run: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the lr-8294 regression where the Diagnostics panel became unclickable and undismissable via backdrop.
Root cause: #diagnostics-panel lives inside #info-panels (lib/public/css/menus.css), a position:fixed container that spans a chunk of the viewport with pointer-events:none so it does not block clicks on the app underneath. Sibling panels (#usage-panel, #status-panel, #context-panel, #team-panel) opt back into pointer-events:auto on their own bounds via a shared CSS selector. lr-8294 (PR #285) added the diagnostics panel to the DOM and gave it its own stylesheet, but never added it to that shared selector -- so it inherited pointer-events:none from its parent. Result: the panel itself, including its own X close button, became fully unclickable. It was not trapping clicks over the rest of the UI (the parent stayed non-modal); it was simply inert.
Fix:
Test plan
Task: lr-b580