feat(core): collapsible edge-mode toolbar with drag-to-snap positioning - #523
Open
dvcolomban wants to merge 2 commits into
Open
feat(core): collapsible edge-mode toolbar with drag-to-snap positioning#523dvcolomban wants to merge 2 commits into
dvcolomban wants to merge 2 commits into
Conversation
Adds an opt-in "Auto-collapse edge toolbar" setting (Settings > Appearance): when idle and closed, the edge-docked toolbar shrinks to a small corner pill instead of permanently spanning the full edge, mirroring Dock.vue's own minimize animation (a real size change, not just an opacity fade) so it stops blocking the underlying host app. Hovering the pill brings it back. The existing "Edge position" button now also acts as a drag handle, letting the whole edge-docked panel be dragged and snapped among the four viewport edges without ever transitioning through float mode mid-drag. Also fixes a pre-existing layout bug in the vertical (left/right) toolbar: its inner wrapper (entries + position/float buttons) never switched to a column flex-direction, squeezing both sub-columns side by side in the 40px-wide toolbar and clipping the position/float buttons out of view.
…rner The collapsed pill shrank toward the corner nearest the "Edge position"/"Float mode" buttons — the end of the toolbar, which is also where the mouse ends up hovering to reveal it. A quick hover-then-click to reopen risked landing on those buttons instead: "Edge position" now doubles as a drag handle, and "Float mode" switches out of edge mode entirely. Anchors the pill at the corner nearest the entries (the toolbar start) instead, and keeps the expanded/collapsed anchor pair identical per position so the width/height transition grows from one fixed corner rather than swapping which side is pinned mid-animation.
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-oxc
@vitejs/devtools-rolldown
@vitejs/devtools-vite
@vitejs/devtools-vitest
commit: |
dvcolomban
commented
Aug 9, 2026
| * today's edge-mode behavior for existing users; opt in from | ||
| * Settings → Appearance. | ||
| */ | ||
| autoCollapseEdgeToolbar?: boolean |
Contributor
Author
There was a problem hiding this comment.
Defaults to false to keep existing behaviour, but could be defaulted to true ?
dvcolomban
marked this pull request as ready for review
August 9, 2026 08:15
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
1 participant
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.
What changed
Dock.vue's own minimize animation (a real size change, not just an opacity fade). Hovering the pill brings it back.left/right) toolbar: its inner wrapper never switched to a column flex-direction, squeezing entries and the position/float buttons side by side in the 40px-wide toolbar and clipping the buttons out of view.Why it changed
Edge mode permanently overlays a strip of the underlying host app with an opaque toolbar, even when DevTools isn't in active use — there's no way to get it out of the way short of switching to float mode entirely. Collapsing to a small pill on idle keeps the affordance discoverable (hover to reveal) while giving back the screen real estate the rest of the time, the same tradeoff
Dock.vue's own float-mode minimize already makes.The pill's anchor corner matters because of where the mouse ends up: after hovering a corner pill to reveal the toolbar, the cursor is sitting right there, and if that corner also held the "Edge position" button, a quick follow-up click could land on it and start a drag or flip to float mode instead of hitting an entry — not what "just show me the toolbar" should do. Anchoring at the entries' side instead avoids that overlap. The collapsed/expanded anchor pair is also kept identical per position (e.g. always
bottom+leftfor the bottom edge) so the width/height transition grows from one fixed corner instead of swapping which side is pinned mid-animation.Demo
Screen.Recording.2026-08-09.at.10.07.00.mov