feat(log-levels): responsive header level chips with overflow menu - #869
Merged
lcottercertinia merged 4 commits intoJul 24, 2026
Merged
Conversation
- render each captured debug level as a read-only VS Code dropdown-face chip using --vscode-settings-dropdown* tokens (filtering not wired yet; structured so the chip becomes the real dropdown later) - collapse overflow into a hard-right +N chevron control + menu panel of the hidden levels, computing how-many-fit synchronously from cached chip widths so the row reflows live during resize - align the log-title, first chip and first tab on a shared header guide via AppHeader inset, and bound width with LogViewer overflow-x: clip (avoids forcing an overflow-y scroll container)
- swap hand-rolled open state + _toggle + document click-outside for the native popover API (popovertarget/[popover]), gaining light-dismiss, Escape and a11y for free - position the pop-out via CSS anchor positioning (anchor-name/position-area) in the top layer, escaping the header's overflow-x: clip - drive the chevron via .container:has([popover]:popover-open) instead of an is-open class - hoist the shared popover id to PANEL_ID so button/panel stay in sync
- add `<overflow-list>`: slot-based responsive overflow row that measures slotted children and moves the ones that dont fit into a native popover menu (Blueprint-style collapse-from/min-visible/menu-heading + ::part hooks) - add `<vs-chip>`: presentational dropdown-face chip (lead slot + value) - reduce LogLevels to a thin adapter rendering `<overflow-list>` of `<vs-chip>`, keeping the migration-to-filters seam - rename logLevelsOverflow → overflowFit (helper is now generic)
lcottercertinia
approved these changes
Jul 24, 2026
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
2 participants
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.
📝 PR Overview
Introduces a responsive log-level display in the app header: one chip per captured debug level, collapsing the ones that don't fit behind a
+Npopover menu as the header narrows. It's built as two reusable web components so the overflow behaviour and the chip face can be reused elsewhere (and the chips later made filterable).🛠️ Changes made
<overflow-list>: a slot-based responsive overflow row (Priority+ pattern). It measures its slotted children and moves the ones that don't fit into a nativepopovermenu; how-many-fit is computed from cached widths (measured once) so resizing stays reflow-free. API mirrors Blueprint/MantineOverflowList(collapse-from,min-visible,menu-heading) with::part(toggle|menu)styling hooks.<vs-chip>: a presentational VS Code dropdown-face chip (leadslot + value slot).LogLevelsto a thin adapter rendering<overflow-list>of<vs-chip>, keeping the migration-to-filters seam in one place.popoverAPI + CSS anchor positioning (no JS toggle or document click-outside listener).AppHeader/LogViewer/NavBartweaks so the log title, first chip and first tab share one left guide, and the header stays bounded so overflow is detectable.logLevelsOverflow.ts→overflowFit.ts(helper is now generic); its unit tests carry over.🧩 Type of change (check all applicable)
📷 Screenshots / gifs / video [optional]
🔗 Related Issues
None.
✅ Tests added?
📚 Docs updated?
🧪badge — see RELEASING.md)Anything else we need to know? [optional]
Reviewer guidance:
OverflowList: it imperatively re-slots overflowing children (slot="overflow") driven by aResizeObserver+ one-time width measurement, with aMutationObserverfor item-set changes. Slot movement (not duplication) is why the menu shows exactly the hidden items.popover+ CSS anchor positioning (VS Code ^1.100 / Chromium ~132).