fix(dock): make every dock scrollable, keep system tiles pinned#264
Merged
Conversation
When the admin menu has more tiles than fit the viewport — common
with many CPTs + plugins — the later menu tiles plus the system
tiles (Recycle Bin, OS Settings, Exit, …) were clipped off the
bottom of the screen with no way to reach them.
Vertical placements (left/right) now build two inner wrappers in
the constructor:
- `__scroll` — flex: 1, scrollable, hosts menu tiles + the inline
core/plugin separator
- `__pinned` — sized to content, hosts the system separator + the
system tiles, always visible at the bottom
The system tiles stay reachable regardless of scroll position; the
menu area absorbs the overflow. Scrollbar is hidden visually
(`scrollbar-width: none` + `::-webkit-scrollbar { display: none }`)
so the rail keeps its clean macOS look. Mouse wheel, touchpad,
touch, and keyboard focus-into-view all work.
The bottom dock keeps its flat structure — no wrappers, no inner
scroll. Drag-to-reorder, `replaceItems`, `appendSystemItem`, and
`removeSystemItem` now route through `itemHost` / `systemHost`
fields so the same code paths serve both shapes.
Fixes #251
Contributor
✅ WordPress Plugin Check Report
📊 ReportAll checks passed! No errors or warnings found. 🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check |
The vertical-dock fix solved the "many CPTs" overflow for left and
right placements, but the bottom dock (Unified / Spatial layouts)
had the same problem horizontally — when the menu tiles' total
width exceeded the pill's `max-width: calc(100% - 32px)`, the
trailing tiles were clipped with no way to reach them.
Drop the bottom-dock special case in the constructor so every
orientation builds the same `__scroll` / `__pinned` wrappers. The
bottom-dock CSS lays them out horizontally:
- `__scroll` — `flex: 1 1 auto; min-width: 0`, hosts menu tiles,
scrolls horizontally with hidden scrollbar
- `__pinned` — `flex-shrink: 0`, hosts the system separator +
system tiles, anchored to the trailing edge
Pill padding shifts from `8px 12px` to `4px 12px 8px` to give
`__scroll` 4px of internal top padding for badge clearance
(`overflow-y: hidden` would otherwise crop the tile's
`top: -3px` badge). Net vertical chrome is unchanged — tile sits
8px from both pill edges, same as before.
With wrappers always on, the `insertMenuChild` helper's
"same-host" branch is dead code; collapsed to a plain appendChild.
The dock-decoration-hooks test that asserted "filter-wrapped tile
is a direct child of the dock" updated to the new structure —
the documented contract is unchanged ("wrap, don't replace"),
only the implementation detail of WHERE the wrapped element
lands moved.
epeicher
changed the title
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.
Summary
Sites with many CPTs + plugins routinely produce more menu tiles than fit the viewport. With a vertical dock (Classic layout's left side bar) the bottom tiles + system cluster get clipped off the bottom of the screen; with a horizontal dock (Unified / Spatial layouts) the trailing tiles get clipped off the right edge. Either way the user can't reach them.
This PR introduces an inner
__scroll/__pinnedwrapper pair on every dock so the menu area can scroll while the system tiles stay pinned at the trailing edge..desktop-mode-dock__scroll— scrollable; hosts menu tiles + the inline core/plugin separator. Scrollbar is hidden visually (scrollbar-width: none+ WebKit pseudo) so the rail keeps its macOS look. Mouse wheel, touchpad, touch, and keyboard focus-into-view all work..desktop-mode-dock__pinned— sized to content; hosts the system separator + system tiles. Always visible at the trailing edge, regardless of scroll position.Vertical placements (left / right) flow the wrappers as columns:
__scrolltakes the available height and scrolls vertically,__pinnedsits at the bottom edge. The bottom placement flows them as rows:__scrolltakes the available width and scrolls horizontally,__pinnedsits at the trailing edge. The bottom pill's padding shifts from8px 12pxto4px 12px 8pxso__scrollhas 4px internal top padding for badge clearance (the tile's badge sits attop: -3px); net vertical chrome is unchanged.Drag-to-reorder,
replaceItems,appendSystemItem, andremoveSystemItemroute through newitemHost/systemHostfields so the same code paths serve both shapes.CleanShot.2026-05-21.at.18.54.11.mp4
Fixes #251.
Test plan
To reproduce overflow: a site with 25+ CPTs / plugin menus. Each layout exposes a different rail shape.