fix(nav): close the rail Settings and org-switcher flyouts on outside click (LC-692) #659

Merged

longjacksonle merged 1 commit from fix/LC-692-flyout-outside-close into main

2026-08-09 18:51:26 +02:00

longjacksonle commented

2026-08-09 18:45:28 +02:00

Owner

What

The rail Settings gear flyout (Profile / Appearance / Notifications & Activity / Privacy & Security) and the enclave/org switcher above it stayed open when you clicked anywhere outside them - you had to click the trigger again to dismiss. Fixes LC-692.

Root cause

Both are native <details> menus (lc-rail-menu, lc-sidebar-org-wrap). A native <details> only toggles from its own <summary>; the browser does not close it on an outside click, and nothing wired that up for these two. The account menu (JS <button>, sidebar_self.html) and the composer AI menu (details.lc-ai-menu, closed in live.js since LC-655) already dismiss on outside click - these two flyouts were the gap.

Fix

One shared closer in server/assets/live.js (already globally loaded, already home to the LC-655 lc-ai-menu closer), keyed on an opt-in data-lc-flyout marker, plus that marker on the two flyout <details>:

An outside click collapses any open details[data-lc-flyout]. A click inside the flyout leaves it open, so item links / htmx actions still fire before anything hides them (same pattern as LC-655).
Escape collapses it and returns focus to the summary (keyboard a11y parity with the account menu).

Opt-in marker so content-disclosure <details> (collapsed call-event groups, attachment alt text, message overflow menus) are untouched, and any future flyout opts in with a single attribute.

Scope

server/assets/live.js (shared closer), partials/enclave_switcher.html + partials/sidebar.html (add data-lc-flyout). No Rust, no new CSS, no i18n.

Verification

cargo check compiles all Askama templates.
node --check server/assets/live.js passes.
Full lib suite: 317 passed.

🤖 Generated with Claude Code

https://claude.ai/code/session_011M7CNRsGzgzc48KinZUAQ8

## What The rail **Settings** gear flyout (Profile / Appearance / Notifications & Activity / Privacy & Security) and the enclave/org switcher above it stayed open when you clicked anywhere outside them - you had to click the trigger again to dismiss. Fixes LC-692. ## Root cause Both are native `<details>` menus (`lc-rail-menu`, `lc-sidebar-org-wrap`). A native `<details>` only toggles from its own `<summary>`; the browser does not close it on an outside click, and nothing wired that up for these two. The account menu (JS `<button>`, sidebar_self.html) and the composer AI menu (`details.lc-ai-menu`, closed in live.js since LC-655) already dismiss on outside click - these two flyouts were the gap. ## Fix One shared closer in `server/assets/live.js` (already globally loaded, already home to the LC-655 lc-ai-menu closer), keyed on an opt-in `data-lc-flyout` marker, plus that marker on the two flyout `<details>`: - An outside click collapses any open `details[data-lc-flyout]`. A click inside the flyout leaves it open, so item links / htmx actions still fire before anything hides them (same pattern as LC-655). - Escape collapses it and returns focus to the summary (keyboard a11y parity with the account menu). Opt-in marker so content-disclosure `<details>` (collapsed call-event groups, attachment alt text, message overflow menus) are untouched, and any future flyout opts in with a single attribute. ## Scope `server/assets/live.js` (shared closer), `partials/enclave_switcher.html` + `partials/sidebar.html` (add `data-lc-flyout`). No Rust, no new CSS, no i18n. ## Verification - `cargo check` compiles all Askama templates. - `node --check server/assets/live.js` passes. - Full lib suite: 317 passed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_011M7CNRsGzgzc48KinZUAQ8

longjacksonle added 1 commit

2026-08-09 18:45:28 +02:00

fix(nav): close the rail Settings and org-switcher flyouts on outside click (LC-692)

check-secrets / TruffleHog (push) Successful in 5s

Details

check-secrets / Nosey parker (push) Successful in 3s

Details

check-secrets / Kingfisher (push) Successful in 6s

Details

check-secrets / Kingfisher (pull_request) Successful in 10s

Details

check-secrets / Nosey parker (pull_request) Successful in 4s

Details

check-secrets / TruffleHog (pull_request) Successful in 6s

Details

Check / clippy + fmt + tests (pull_request) Successful in 5m55s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

95c88e0ff1

The rail Settings gear flyout (Profile / Appearance / Notifications / Privacy) and the enclave/org switcher above it are native `<details>` menus. A native `<details>` only toggles from its own `<summary>`, so the browser never closes it on an outside click - you had to click the trigger again to dismiss it. The account menu (JS button) and the composer AI menu (`lc-ai-menu`, LC-655) already dismiss on outside click; these two native-`<details>` flyouts were the gap.

Add one shared outside-click + Escape closer in live.js (already globally loaded and already home to the LC-655 lc-ai-menu closer), keyed on an opt-in `data-lc-flyout` marker, and mark the two flyouts with it. A click inside the flyout leaves it open so item links / htmx still fire; Escape collapses it and returns focus to the summary. Opt-in marker so content-disclosure `<details>` (call-event groups, attachment alt, message overflow) are untouched and any future flyout opts in with one attribute.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011M7CNRsGzgzc48KinZUAQ8

longjacksonle scheduled this pull request to auto merge when all checks succeed

2026-08-09 18:45:56 +02:00