fix: improve sidebar resize handle for fine and coarse pointers

NEWS.md

@@ -2,6 +2,10 @@
 
 ## Improvements and bug fixes
 
+* 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)
+
 * Fixed `toolbar_input_button()` alignment and spacing issues. (#1290)
 
 * The brand.yml example app (`shiny::runExample("brand.yml", package = "bslib")`) now uses `brand_pluck()` and `brand_has()` from `{brand.yml}`. (#1288)

R/sidebar.R

@@ -87,6 +87,9 @@
 #' @param fillable Whether or not the sidebar should be considered a fillable
 #'   container. When `TRUE`, the sidebar and its content can use `fill` to
 #'   consume available vertical space.
+#' @param resizable Whether the sidebar can be resized by dragging its edge.
+#'   When `TRUE` (the default), a resize handle is added to the sidebar that
+#'   allows users to adjust the sidebar width on desktop (wide screen sizes).
 #'
 #' @export
 sidebar <- function(
@@ -102,7 +105,8 @@ sidebar <- function(
   max_height_mobile = NULL,
   gap = NULL,
   padding = NULL,
-  fillable = FALSE
+  fillable = FALSE,
+  resizable = TRUE
 ) {
   position <- rlang::arg_match(position)
   gap <- validateCssUnit(gap)
@@ -150,6 +154,7 @@ sidebar <- function(
     max_height_mobile = max_height_mobile,
     color = list(bg = bg, fg = fg),
     fillable = fillable,
+    resizable = resizable,
     attributes = dots$attribs,
     children = dots$children
   )
@@ -220,6 +225,7 @@ as.tags.bslib_sidebar <- function(x, ...) {
     id = x$id,
     class = c("sidebar", x$class),
     hidden = if (hidden_initially) NA,
+    `data-resizable` = if (isTRUE(x$resizable)) NA,
     if (isTRUE(x$fillable)) as_fillable_container(),
     tags$div(
       class = "sidebar-content bslib-gap-spacing",

inst/components/scss/sidebar.scss

@@ -62,7 +62,11 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
   --_toggle-collective-height: calc(calc(var(--_icon-button-size) + 0.5em) * var(--_js-toggle-count-max-side, 1));
 
   // Resize handle variables
-  --_resize-handle-width: var(--bslib-sidebar-resize-handle-width, 12px);
+  --_resize-handle-width: var(--bslib-sidebar-resize-handle-width, 8px);
+
+  @media (any-pointer: coarse) {
+    --_resize-handle-width: var(--bslib-sidebar-resize-handle-width, 26px);
+  }
   --_resize-indicator-color: var(--_sidebar-fg, var(--bs-emphasis-color, black));
   --_resize-indicator-color-active: var(--bslib-sidebar-resize-indicator-color-active, var(--bs-primary, #0d6efd));
 
@@ -309,20 +313,45 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
     width: var(--_resize-handle-width);
     left: calc(calc(-1 * var(--_resize-handle-width)) - 2px);
     grid-column: 2;
-    cursor: ew-resize;
+    pointer-events: none;
     user-select: none;
     z-index: calc(#{$zindex-dropdown} + 1); // Above toggle button
 
-    // Make the handle easier to grab
+    // Trip area: a narrow strip at the sidebar outer edge that detects the
+    // mouse crossing the sidebar boundary. Positioned past the handle so
+    // it doesn't overlap the sidebar scrollbar beneath the handle.
+    // Expands when .handle-active is added to prevent accidental deactivation.
     &::before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 0;
-      // Invisible expanded hit area
-      left: 0;
-      right: calc(-1 * var(--_resize-handle-width) - 2px);
-      z-index: calc(#{$zindex-dropdown} + 1); // Above toggle button
+      left: 100%;
+      width: 5px;
+      pointer-events: auto;
+    }
+
+    // When the mouse crosses the sidebar edge, JS adds .handle-active
+    // to show the resize cursor and expand the trip area.
+    &.handle-active {
+      cursor: ew-resize;
+
+      &::before {
+        left: calc(100% - 10px);
+        width: 24px;
+      }
+    }
+
+    // Touch users get the full handle + extended hit area
+    @media (any-pointer: coarse) {
+      pointer-events: auto;
+      cursor: ew-resize;
+
+      &::before {
+        left: 0;
+        width: auto;
+        right: calc(-1 * var(--_resize-handle-width) - 2px);
+      }
     }
 
     .resize-indicator {
@@ -338,14 +367,15 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
       transition: all 0.15s ease;
     }
 
-    &:hover, &:focus, &:active, &:focus {
+    &:hover, &:focus, &:active, &.handle-active {
       .resize-indicator {
         opacity: 1;
       }
     }
 
     &:hover .resize-indicator,
-    &:focus .resize-indicator {
+    &:focus .resize-indicator,
+    &.handle-active .resize-indicator {
       width: 3px;
       height: 40px;
     }
@@ -370,6 +400,20 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
   // Right sidebar resize handle positioning
   &.sidebar-right > .bslib-sidebar-resize-handle {
     left: 2px;
+
+    &::before {
+      left: auto;
+      right: 100%;
+    }
+
+    &.handle-active::before {
+      right: calc(100% - 10px);
+    }
+  }
+
+  // Hide resize handle when sidebar is not resizable
+  > .sidebar:not([data-resizable]) ~ .bslib-sidebar-resize-handle {
+    display: none;
   }
 
   // Hide resize handle during transitions and when collapsed