fix: improve sidebar resize handle for fine and coarse pointers#1299
Merged
fix: improve sidebar resize handle for fine and coarse pointers#1299
Conversation
- Set resize handle width to 8px for fine pointers (mouse) and 26px for touch users via @media (any-pointer: coarse) - Prevent resize activation when clicking the sidebar scrollbar by requiring the mouse to cross the sidebar's outer edge before the handle becomes active (adds .handle-active class) - Use a 5px trip area at the sidebar edge that expands to 24px (12px per side) once activated, with engagement-point dismissal to create perceived directional bias - Handle stays pointer-events: none for fine pointers so the native scrollbar remains fully clickable beneath it - Touch users bypass activation logic and get full handle interactivity Fixes #1294
Add a `resizable` parameter (default TRUE) that controls whether the sidebar resize handle is enabled. When TRUE, a `data-resizable` attribute is added to the sidebar `<aside>` element; the JS and CSS only enable resize functionality when this attribute is present. Fixes #1294
cpsievert
reviewed
Mar 17, 2026
|
|
||
| * Improved the sidebar resize handle to avoid conflicts with the sidebar's native scrollbar and to better support touch devices. (#1299) | ||
|
|
||
| * `sidebar()` gains a `resizable` argument (default `TRUE`) to control whether the sidebar can be resized by dragging its edge on desktop (wide screen sizes). (#1299) |
Collaborator
There was a problem hiding this comment.
Should go under a new features section?
Member
Author
There was a problem hiding this comment.
It's incremental and minor; I'd call it an "improvement" more than a "new feature"
cpsievert
approved these changes
Mar 17, 2026
gadenbuie
added a commit
that referenced
this pull request
Mar 17, 2026
I meant to include this in #1299
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.
Fixes #1294, both literally and in spirit.
Summary
Improves the sidebar resize handle to work better across pointer types and to avoid conflicts with the sidebar's native scrollbar.
Allow disabling resizable sidebars: Several users have requested the ability to disable sidebar resizing, and this PR makes it possible by adding a
resizableargument tosidebar(). The default isTRUE, so app authors who don't want resizable sidebars can now useresizable = FALSE.Handle width by pointer type:
@media (any-pointer: coarse)Scrollbar conflict resolution:
The resize handle is positioned just inside the sidebar's outer edge, overlapping the native scrollbar. Previously, clicking the scrollbar would start a resize instead. This is resolved with a midpoint-crossing activation pattern:
pointer-events: noneby default, so the scrollbar beneath remains fully clickable::before"trip area" at the sidebar's outer edge detects the mouse crossing the boundary.handle-activeclass that shows theew-resizecursor (inherited by::before) and expands the trip area to 24px (12px per side)Screen.Recording.2026-03-16.at.3.05.26.PM.mov
Verification