Skip to content

fix: improve sidebar resize handle for fine and coarse pointers#1299

Merged
gadenbuie merged 5 commits intomainfrom
fix/1294-resize-handle-width
Mar 17, 2026
Merged

fix: improve sidebar resize handle for fine and coarse pointers#1299
gadenbuie merged 5 commits intomainfrom
fix/1294-resize-handle-width

Conversation

@gadenbuie
Copy link
Member

@gadenbuie gadenbuie commented Mar 16, 2026

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 resizable argument to sidebar(). The default is TRUE, so app authors who don't want resizable sidebars can now use resizable = FALSE.

Handle width by pointer type:

  • Fine pointers (mouse): 8px (down from 12px)
  • Coarse pointers (touch): 26px via @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:

  • The handle has pointer-events: none by default, so the scrollbar beneath remains fully clickable
  • A narrow 5px ::before "trip area" at the sidebar's outer edge detects the mouse crossing the boundary
  • When crossed, JS adds a .handle-active class that shows the ew-resize cursor (inherited by ::before) and expands the trip area to 24px (12px per side)
  • An engagement-point dismissal mechanism deactivates the handle if the mouse reverses back past where it activated, creating perceived directional bias without asymmetric sizing
  • Touch users bypass this entirely — the handle is always interactive with a wide hit area
Screen.Recording.2026-03-16.at.3.05.26.PM.mov

Verification

library(shiny)
library(bslib)

ui <- page_sidebar(
  sidebar = sidebar(
    title = "Sidebar",
    lorem::ipsum(10)
  ),
  "Main content"
)

shinyApp(ui, function(input, output, session) {})
  1. Hover over the sidebar's right edge — the resize cursor should NOT appear until the mouse crosses the sidebar boundary
  2. Click and drag the sidebar scrollbar — it should scroll, not resize
  3. Cross the sidebar edge toward the main area — the resize indicator and cursor should appear
  4. Click and drag to resize the sidebar
  5. Test on a touch device or with Chrome DevTools device emulation — the handle should be wider and always interactive

gadenbuie and others added 3 commits March 16, 2026 15:00
- 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
@gadenbuie gadenbuie marked this pull request as ready for review March 16, 2026 20:06
@gadenbuie gadenbuie requested a review from cpsievert March 16, 2026 20:09

* 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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should go under a new features section?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's incremental and minor; I'd call it an "improvement" more than a "new feature"

@gadenbuie gadenbuie merged commit 6e79e23 into main Mar 17, 2026
1 check passed
@gadenbuie gadenbuie deleted the fix/1294-resize-handle-width branch March 17, 2026 12:40
gadenbuie added a commit that referenced this pull request Mar 17, 2026
I meant to include this in #1299
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow me to disable the sidebar resize

2 participants