From c89d504fffda799c8bbb0027cc2cdf7c29777245 Mon Sep 17 00:00:00 2001
From: Jose Gaston <jmcbgaston@gmail.com>
Date: Thu, 14 May 2026 17:48:30 -0400
Subject: [PATCH 1/3] feat(content-sidebar): add drag-to-resize handle behind
 feature flag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a pointer- and keyboard-accessible resize handle on the left edge
of the sidebar. Current default width becomes the minimum; maximum is
clamped at 50% of the viewport. Width state lives on the `Sidebar`
component and is session-only (no persistence).

The new `SidebarResizeHandle` component is a `role="separator"` with
live `aria-valuenow` / `aria-valuemin` / `aria-valuemax`, supports
ArrowLeft / ArrowRight / Home / End for keyboard resize, and uses
pointer capture during drag.

Gated by `isFeatureEnabled(features, 'contentSidebar.resizable.enabled')`
and additionally restricted to large / x-large viewports via the
existing `withMediaQuery` HOC — small / medium viewports keep the
original bottom-sheet layout. SCSS overrides for `.bcs-content` and
`.bcs-activity-feed` are scoped under `.bcs-is-resizable` so flag-off
behavior is unchanged.
---
 .../content-sidebar/ContentSidebar.scss       |  22 +++-
 src/elements/content-sidebar/Sidebar.js       |  54 ++++++++-
 .../content-sidebar/SidebarContent.scss       |  10 ++
 .../content-sidebar/SidebarResizeHandle.js    | 109 ++++++++++++++++++
 .../content-sidebar/SidebarResizeHandle.scss  |  25 ++++
 .../activity-feed/ActivityFeed.scss           |   6 +
 6 files changed, 223 insertions(+), 3 deletions(-)
 create mode 100644 src/elements/content-sidebar/SidebarResizeHandle.js
 create mode 100644 src/elements/content-sidebar/SidebarResizeHandle.scss

diff --git a/src/elements/content-sidebar/ContentSidebar.scss b/src/elements/content-sidebar/ContentSidebar.scss
index b16a8b098f..18290d0127 100644
--- a/src/elements/content-sidebar/ContentSidebar.scss
+++ b/src/elements/content-sidebar/ContentSidebar.scss
@@ -8,6 +8,7 @@ $sidebarDefaultErrorIncreasedWidth: $sidebarContentIncreasedWidth - 16px;
 
 .be {
     &.bcs {
+        position: relative;
         display: flex;
         width: auto;
         min-width: $sidebarTabsWidth;
@@ -17,6 +18,16 @@ $sidebarDefaultErrorIncreasedWidth: $sidebarContentIncreasedWidth - 16px;
         &.bcs-is-wider {
             max-width: $sidebarIncreasedWidth;
         }
+
+        // When resizable, the default min-width is the un-resized sidebar width.
+        // Inline style on the aside element overrides the default max-width to allow grow.
+        &.bcs-is-resizable.bcs-is-open {
+            min-width: $sidebarWidth;
+
+            &.bcs-is-wider {
+                min-width: $sidebarIncreasedWidth;
+            }
+        }
     }
 
     .bcs-loading {
@@ -61,11 +72,20 @@ $sidebarDefaultErrorIncreasedWidth: $sidebarContentIncreasedWidth - 16px;
             min-width: 0;
             max-width: none;
             max-height: 48px;
-            transition: max-height .5s ease-in-out 0s;
+            transition: max-height 0.5s ease-in-out 0s;
 
             &.bcs-is-wider {
                 max-width: none;
             }
+
+            // Neutralize resizable overrides on small screens — sidebar is a bottom sheet here
+            &.bcs-is-resizable.bcs-is-open {
+                min-width: 0;
+
+                &.bcs-is-wider {
+                    min-width: 0;
+                }
+            }
         }
 
         &.bcs-is-open {
diff --git a/src/elements/content-sidebar/Sidebar.js b/src/elements/content-sidebar/Sidebar.js
index 1bdf94f62e..d851610cd1 100644
--- a/src/elements/content-sidebar/Sidebar.js
+++ b/src/elements/content-sidebar/Sidebar.js
@@ -14,8 +14,11 @@ import { withRouter } from 'react-router-dom';
 import type { Location, RouterHistory } from 'react-router-dom';
 import LoadingIndicator from '../../components/loading-indicator/LoadingIndicator';
 import LocalStore from '../../utils/LocalStore';
+import withMediaQuery from '../../components/media-query/withMediaQuery';
+import { VIEW_SIZE_TYPE } from '../../components/media-query/constants';
 import SidebarNav from './SidebarNav';
 import SidebarPanels from './SidebarPanels';
+import SidebarResizeHandle from './SidebarResizeHandle';
 import SidebarUtils from './SidebarUtils';
 // $FlowFixMe TypeScript file
 import ThemingStyles from '../common/theming';
@@ -74,12 +77,14 @@ type Props = {
     /** When true, enables data fetching. When false, defers data fetching. Used to prioritize preview loading. */
     shouldFetchSidebarData?: boolean,
     signSidebarProps: SignSidebarProps,
+    size: $Values<typeof VIEW_SIZE_TYPE>,
     theme?: Theme,
     versionsSidebarProps: VersionsSidebarProps,
 };
 
 type State = {
     isDirty: boolean,
+    width: ?number,
 };
 
 export const SIDEBAR_FORCE_KEY: 'bcs.force' = 'bcs.force';
@@ -87,6 +92,12 @@ export const SIDEBAR_FORCE_VALUE_CLOSED: 'closed' = 'closed';
 export const SIDEBAR_FORCE_VALUE_OPEN: 'open' = 'open';
 export const SIDEBAR_SELECTED_PANEL_KEY: 'sidebar-selected-panel' = 'sidebar-selected-panel';
 
+// Resize constants — defaults mirror the hardcoded SCSS values ($sidebarTabsWidth + $sidebarContent[Increased]Width).
+// When the resizable feature flag is on, these become the minimum drag-to-resize values.
+const SIDEBAR_DEFAULT_WIDTH = 400;
+const SIDEBAR_DEFAULT_WIDTH_WIDER = 440;
+const SIDEBAR_MAX_WIDTH_RATIO = 0.5; // cap at 50% of viewport width
+
 class Sidebar extends React.Component<Props, State> {
     static defaultProps = {
         annotatorState: {},
@@ -111,11 +122,24 @@ class Sidebar extends React.Component<Props, State> {
 
         this.state = {
             isDirty: this.getLocationState('open') || false,
+            width: null,
         };
 
         this.setForcedByLocation();
     }
 
+    /**
+     * Default sidebar width based on whether the "wider" (Box AI) variant is active.
+     * Mirrors the SCSS fallback so flipping the flag on doesn't change the rendered width at rest.
+     */
+    getDefaultWidth(hasNativeBoxAISidebar: boolean, hasCustomBoxAISidebar: boolean): number {
+        return hasNativeBoxAISidebar || hasCustomBoxAISidebar ? SIDEBAR_DEFAULT_WIDTH_WIDER : SIDEBAR_DEFAULT_WIDTH;
+    }
+
+    handleResize = (width: number): void => {
+        this.setState({ width });
+    };
+
     componentDidMount() {
         const { file, api, metadataSidebarProps, docGenSidebarProps, onOpenChange = noop }: Props = this.props;
         // if docgen feature is enabled, load metadata to check whether file is a docgen template
@@ -304,6 +328,7 @@ class Sidebar extends React.Component<Props, State> {
             customSidebarPanels = [],
             detailsSidebarProps,
             docGenSidebarProps,
+            features,
             file,
             fileId,
             getPreview,
@@ -317,9 +342,11 @@ class Sidebar extends React.Component<Props, State> {
             onAnnotationSelect,
             onVersionChange,
             signSidebarProps,
+            size,
             theme,
             versionsSidebarProps,
         }: Props = this.props;
+        const { width }: State = this.state;
         const isOpen = this.isOpen();
 
         const hasCustomBoxAISidebar = customSidebarPanels.some(panel => panel.id === SIDEBAR_VIEW_BOXAI);
@@ -331,14 +358,37 @@ class Sidebar extends React.Component<Props, State> {
         const hasMetadata = SidebarUtils.shouldRenderMetadataSidebar(this.props, metadataEditors);
         const hasSkills = SidebarUtils.shouldRenderSkillsSidebar(this.props, file);
         const onVersionHistoryClick = hasVersions ? this.handleVersionHistoryClick : this.props.onVersionHistoryClick;
+
+        const isViewportWideEnoughToResize = size === VIEW_SIZE_TYPE.large || size === VIEW_SIZE_TYPE.xlarge;
+        const isResizable =
+            isFeatureEnabled(features, 'contentSidebar.resizable.enabled') && isViewportWideEnoughToResize;
+        const minWidth = this.getDefaultWidth(hasNativeBoxAISidebar, hasCustomBoxAISidebar);
+        const maxWidth =
+            typeof window !== 'undefined'
+                ? Math.max(minWidth, Math.round(window.innerWidth * SIDEBAR_MAX_WIDTH_RATIO))
+                : minWidth;
+        const currentWidth = width != null ? Math.min(Math.max(width, minWidth), maxWidth) : minWidth;
+        // Only force inline width once the user has actually dragged — otherwise leave the SCSS defaults in place.
+        const shouldApplyInlineWidth = isResizable && isOpen && width != null;
+        const inlineStyle = shouldApplyInlineWidth ? { width: currentWidth, maxWidth: currentWidth } : undefined;
+
         const styleClassName = classNames('be bcs', className, {
             'bcs-is-open': isOpen,
+            'bcs-is-resizable': isResizable,
             'bcs-is-wider': hasNativeBoxAISidebar || hasCustomBoxAISidebar,
         });
         const defaultPanel = this.getDefaultPanel();
 
         return (
-            <aside id={this.id} className={styleClassName} data-testid="preview-sidebar">
+            <aside id={this.id} className={styleClassName} data-testid="preview-sidebar" style={inlineStyle}>
+                {isResizable && isOpen && !isLoading && (
+                    <SidebarResizeHandle
+                        maxWidth={maxWidth}
+                        minWidth={minWidth}
+                        onResize={this.handleResize}
+                        width={currentWidth}
+                    />
+                )}
                 <ThemingStyles theme={theme} />
                 {isLoading ? (
                     <div className="bcs-loading">
@@ -404,4 +454,4 @@ class Sidebar extends React.Component<Props, State> {
 }
 
 export { Sidebar as SidebarComponent };
-export default flow([withCurrentUser, withFeatureConsumer, withRouter])(Sidebar);
+export default flow([withCurrentUser, withFeatureConsumer, withMediaQuery, withRouter])(Sidebar);
diff --git a/src/elements/content-sidebar/SidebarContent.scss b/src/elements/content-sidebar/SidebarContent.scss
index 21481c20d7..0da6abb239 100644
--- a/src/elements/content-sidebar/SidebarContent.scss
+++ b/src/elements/content-sidebar/SidebarContent.scss
@@ -63,6 +63,16 @@ $sidebarScrollContentIncreasedWidth: $sidebarScrollContentWidth + 40px;
     }
 }
 
+// When resizable, let .bcs-content and its scroll children fill the resized aside
+.bcs-is-resizable .bcs-content,
+.bcs-is-resizable.bcs-is-wider .bcs-content {
+    width: 100%;
+
+    .bcs-scroll-content {
+        width: 100%;
+    }
+}
+
 @include breakpoint($medium-screen) {
     .bcs-content,
     .bcs-is-wider .bcs-content {
diff --git a/src/elements/content-sidebar/SidebarResizeHandle.js b/src/elements/content-sidebar/SidebarResizeHandle.js
new file mode 100644
index 0000000000..fc589a3e9c
--- /dev/null
+++ b/src/elements/content-sidebar/SidebarResizeHandle.js
@@ -0,0 +1,109 @@
+/**
+ * @flow
+ * @file Sidebar Resize Handle — drag-to-resize grip on the left edge of the sidebar.
+ * @author Box
+ */
+
+import * as React from 'react';
+import './SidebarResizeHandle.scss';
+
+type Props = {
+    maxWidth: number,
+    minWidth: number,
+    onResize: (width: number) => void,
+    onResizeEnd?: () => void,
+    onResizeStart?: () => void,
+    width: number,
+};
+
+const KEYBOARD_STEP = 16;
+
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
+
+const SidebarResizeHandle = ({ maxWidth, minWidth, onResize, onResizeEnd, onResizeStart, width }: Props) => {
+    const startXRef = React.useRef<number>(0);
+    const startWidthRef = React.useRef<number>(width);
+    const [isDragging, setIsDragging] = React.useState(false);
+
+    const handlePointerMove = React.useCallback(
+        (event: PointerEvent) => {
+            // Sidebar lives on the RIGHT edge of the viewport, and the handle is on its LEFT edge.
+            // Dragging LEFT (smaller clientX) should GROW the sidebar.
+            const deltaX = startXRef.current - event.clientX;
+            const nextWidth = clamp(startWidthRef.current + deltaX, minWidth, maxWidth);
+            onResize(nextWidth);
+        },
+        [maxWidth, minWidth, onResize],
+    );
+
+    const handlePointerUp = React.useCallback(
+        (event: PointerEvent) => {
+            setIsDragging(false);
+            const { target } = event;
+            if (target instanceof Element && target.hasPointerCapture?.(event.pointerId)) {
+                target.releasePointerCapture(event.pointerId);
+            }
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+            onResizeEnd?.();
+        },
+        [handlePointerMove, onResizeEnd],
+    );
+
+    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        startXRef.current = event.clientX;
+        startWidthRef.current = width;
+        setIsDragging(true);
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        onResizeStart?.();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        // ArrowLeft grows (same direction as dragging left), ArrowRight shrinks.
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            onResize(clamp(width + KEYBOARD_STEP, minWidth, maxWidth));
+        } else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            onResize(clamp(width - KEYBOARD_STEP, minWidth, maxWidth));
+        } else if (event.key === 'Home') {
+            event.preventDefault();
+            onResize(minWidth);
+        } else if (event.key === 'End') {
+            event.preventDefault();
+            onResize(maxWidth);
+        }
+    };
+
+    React.useEffect(() => {
+        return () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+        };
+    }, [handlePointerMove, handlePointerUp]);
+
+    // role="separator" with aria-valuenow is a focusable ARIA widget and needs both
+    // pointer + keyboard interactions on the element itself.
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+    return (
+        <div
+            aria-label="Resize sidebar"
+            aria-orientation="vertical"
+            aria-valuemax={maxWidth}
+            aria-valuemin={minWidth}
+            aria-valuenow={width}
+            className={`bcs-resize-handle${isDragging ? ' bcs-resize-handle-is-dragging' : ''}`}
+            data-testid="sidebar-resize-handle"
+            onKeyDown={handleKeyDown}
+            onPointerDown={handlePointerDown}
+            role="separator"
+            tabIndex={0}
+        />
+    );
+    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+};
+
+export default SidebarResizeHandle;
diff --git a/src/elements/content-sidebar/SidebarResizeHandle.scss b/src/elements/content-sidebar/SidebarResizeHandle.scss
new file mode 100644
index 0000000000..399dfdb745
--- /dev/null
+++ b/src/elements/content-sidebar/SidebarResizeHandle.scss
@@ -0,0 +1,25 @@
+@import '../common/variables';
+
+.bcs-resize-handle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+
+    &:hover,
+    &:focus-visible,
+    &.bcs-resize-handle-is-dragging {
+        background-color: $bdl-box-blue;
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid $bdl-box-blue;
+        outline-offset: -2px;
+    }
+}
diff --git a/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss b/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss
index 3f0bcd7433..42fc6ee04a 100644
--- a/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss
+++ b/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss
@@ -161,6 +161,12 @@
     width: $sidebarContentIncreasedWidth;
 }
 
+// When resizable, the activity feed fills the parent (which is itself fluid via inline width on .bcs)
+.bcs-is-resizable .bcs-activity-feed,
+.bcs-is-resizable.bcs-is-wider .bcs-activity-feed {
+    width: 100%;
+}
+
 @include breakpoint($medium-screen) {
     .be .bcs-activity-feed {
         width: 100%;

From 78bffd6be339e9a280d12e8099aa61c04d54b6e8 Mon Sep 17 00:00:00 2001
From: Jose Gaston <jmcbgaston@gmail.com>
Date: Thu, 14 May 2026 18:42:21 -0400
Subject: [PATCH 2/3] refactor(content-sidebar): address review feedback and
 add tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make `maxWidth` reactive by reading `viewWidth` from withMediaQuery
  (previously read `window.innerWidth` at render time, leaving the cap
  stale across browser resizes)
- Drop unused `onResizeStart` / `onResizeEnd` props from
  `SidebarResizeHandle` — no caller passes them
- Simplify SCSS selectors: `.bcs-is-resizable.bcs-is-wider .bcs-content`
  was redundant with `.bcs-is-resizable .bcs-content` (same specificity,
  source order wins)
- Replace TS-style React event types with Flow's Synthetic* and replace
  optional-chain calls with explicit guards so Flow typecheck passes
- Strip keyboard interaction for MVP; mark the handle `aria-hidden="true"`
  so AT users aren't shown an unfocusable widget
- Add `SidebarResizeHandle.test.js` covering render, drag-grow,
  drag-shrink, min/max clamping, dragging class, and listener cleanup
- Add a `resizable` describe block to `Sidebar.test.js` covering FF gate,
  viewport gate, open-state gate, inline-width application, and
  maxWidth-from-viewport behavior
---
 src/elements/content-sidebar/Sidebar.js       |  14 +--
 .../content-sidebar/SidebarContent.scss       |   3 +-
 .../content-sidebar/SidebarResizeHandle.js    |  55 +++-----
 .../content-sidebar/SidebarResizeHandle.scss  |   7 --
 .../content-sidebar/__tests__/Sidebar.test.js |  89 +++++++++++++
 .../__tests__/SidebarResizeHandle.test.js     | 118 ++++++++++++++++++
 .../activity-feed/ActivityFeed.scss           |   3 +-
 7 files changed, 230 insertions(+), 59 deletions(-)
 create mode 100644 src/elements/content-sidebar/__tests__/SidebarResizeHandle.test.js

diff --git a/src/elements/content-sidebar/Sidebar.js b/src/elements/content-sidebar/Sidebar.js
index d851610cd1..cb196c8552 100644
--- a/src/elements/content-sidebar/Sidebar.js
+++ b/src/elements/content-sidebar/Sidebar.js
@@ -80,6 +80,7 @@ type Props = {
     size: $Values<typeof VIEW_SIZE_TYPE>,
     theme?: Theme,
     versionsSidebarProps: VersionsSidebarProps,
+    viewWidth: number,
 };
 
 type State = {
@@ -92,11 +93,12 @@ export const SIDEBAR_FORCE_VALUE_CLOSED: 'closed' = 'closed';
 export const SIDEBAR_FORCE_VALUE_OPEN: 'open' = 'open';
 export const SIDEBAR_SELECTED_PANEL_KEY: 'sidebar-selected-panel' = 'sidebar-selected-panel';
 
-// Resize constants — defaults mirror the hardcoded SCSS values ($sidebarTabsWidth + $sidebarContent[Increased]Width).
-// When the resizable feature flag is on, these become the minimum drag-to-resize values.
+// Default widths mirror the hardcoded SCSS values ($sidebarTabsWidth + $sidebarContent[Increased]Width).
+// When the resizable feature flag is on, these become the minimum drag-to-resize widths.
 const SIDEBAR_DEFAULT_WIDTH = 400;
 const SIDEBAR_DEFAULT_WIDTH_WIDER = 440;
-const SIDEBAR_MAX_WIDTH_RATIO = 0.5; // cap at 50% of viewport width
+// Cap dragged width at this fraction of the current viewport width.
+const SIDEBAR_MAX_WIDTH_RATIO = 0.5;
 
 class Sidebar extends React.Component<Props, State> {
     static defaultProps = {
@@ -345,6 +347,7 @@ class Sidebar extends React.Component<Props, State> {
             size,
             theme,
             versionsSidebarProps,
+            viewWidth,
         }: Props = this.props;
         const { width }: State = this.state;
         const isOpen = this.isOpen();
@@ -363,10 +366,7 @@ class Sidebar extends React.Component<Props, State> {
         const isResizable =
             isFeatureEnabled(features, 'contentSidebar.resizable.enabled') && isViewportWideEnoughToResize;
         const minWidth = this.getDefaultWidth(hasNativeBoxAISidebar, hasCustomBoxAISidebar);
-        const maxWidth =
-            typeof window !== 'undefined'
-                ? Math.max(minWidth, Math.round(window.innerWidth * SIDEBAR_MAX_WIDTH_RATIO))
-                : minWidth;
+        const maxWidth = Math.max(minWidth, Math.round(viewWidth * SIDEBAR_MAX_WIDTH_RATIO));
         const currentWidth = width != null ? Math.min(Math.max(width, minWidth), maxWidth) : minWidth;
         // Only force inline width once the user has actually dragged — otherwise leave the SCSS defaults in place.
         const shouldApplyInlineWidth = isResizable && isOpen && width != null;
diff --git a/src/elements/content-sidebar/SidebarContent.scss b/src/elements/content-sidebar/SidebarContent.scss
index 0da6abb239..c0a370855f 100644
--- a/src/elements/content-sidebar/SidebarContent.scss
+++ b/src/elements/content-sidebar/SidebarContent.scss
@@ -64,8 +64,7 @@ $sidebarScrollContentIncreasedWidth: $sidebarScrollContentWidth + 40px;
 }
 
 // When resizable, let .bcs-content and its scroll children fill the resized aside
-.bcs-is-resizable .bcs-content,
-.bcs-is-resizable.bcs-is-wider .bcs-content {
+.bcs-is-resizable .bcs-content {
     width: 100%;
 
     .bcs-scroll-content {
diff --git a/src/elements/content-sidebar/SidebarResizeHandle.js b/src/elements/content-sidebar/SidebarResizeHandle.js
index fc589a3e9c..cb23e10f0f 100644
--- a/src/elements/content-sidebar/SidebarResizeHandle.js
+++ b/src/elements/content-sidebar/SidebarResizeHandle.js
@@ -11,16 +11,12 @@ type Props = {
     maxWidth: number,
     minWidth: number,
     onResize: (width: number) => void,
-    onResizeEnd?: () => void,
-    onResizeStart?: () => void,
     width: number,
 };
 
-const KEYBOARD_STEP = 16;
-
 const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
 
-const SidebarResizeHandle = ({ maxWidth, minWidth, onResize, onResizeEnd, onResizeStart, width }: Props) => {
+const SidebarResizeHandle = ({ maxWidth, minWidth, onResize, width }: Props) => {
     const startXRef = React.useRef<number>(0);
     const startWidthRef = React.useRef<number>(width);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -39,43 +35,31 @@ const SidebarResizeHandle = ({ maxWidth, minWidth, onResize, onResizeEnd, onResi
     const handlePointerUp = React.useCallback(
         (event: PointerEvent) => {
             setIsDragging(false);
-            const { target } = event;
-            if (target instanceof Element && target.hasPointerCapture?.(event.pointerId)) {
+            const {target} = event;
+            if (
+                target &&
+                typeof target.hasPointerCapture === 'function' &&
+                typeof target.releasePointerCapture === 'function' &&
+                target.hasPointerCapture(event.pointerId)
+            ) {
                 target.releasePointerCapture(event.pointerId);
             }
             window.removeEventListener('pointermove', handlePointerMove);
             window.removeEventListener('pointerup', handlePointerUp);
-            onResizeEnd?.();
         },
-        [handlePointerMove, onResizeEnd],
+        [handlePointerMove],
     );
 
-    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    const handlePointerDown = (event: SyntheticPointerEvent<HTMLDivElement>) => {
         event.preventDefault();
         startXRef.current = event.clientX;
         startWidthRef.current = width;
         setIsDragging(true);
-        event.currentTarget.setPointerCapture?.(event.pointerId);
+        if (typeof event.currentTarget.setPointerCapture === 'function') {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
         window.addEventListener('pointermove', handlePointerMove);
         window.addEventListener('pointerup', handlePointerUp);
-        onResizeStart?.();
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-        // ArrowLeft grows (same direction as dragging left), ArrowRight shrinks.
-        if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            onResize(clamp(width + KEYBOARD_STEP, minWidth, maxWidth));
-        } else if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            onResize(clamp(width - KEYBOARD_STEP, minWidth, maxWidth));
-        } else if (event.key === 'Home') {
-            event.preventDefault();
-            onResize(minWidth);
-        } else if (event.key === 'End') {
-            event.preventDefault();
-            onResize(maxWidth);
-        }
     };
 
     React.useEffect(() => {
@@ -85,25 +69,14 @@ const SidebarResizeHandle = ({ maxWidth, minWidth, onResize, onResizeEnd, onResi
         };
     }, [handlePointerMove, handlePointerUp]);
 
-    // role="separator" with aria-valuenow is a focusable ARIA widget and needs both
-    // pointer + keyboard interactions on the element itself.
-    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
     return (
         <div
-            aria-label="Resize sidebar"
-            aria-orientation="vertical"
-            aria-valuemax={maxWidth}
-            aria-valuemin={minWidth}
-            aria-valuenow={width}
+            aria-hidden="true"
             className={`bcs-resize-handle${isDragging ? ' bcs-resize-handle-is-dragging' : ''}`}
             data-testid="sidebar-resize-handle"
-            onKeyDown={handleKeyDown}
             onPointerDown={handlePointerDown}
-            role="separator"
-            tabIndex={0}
         />
     );
-    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
 };
 
 export default SidebarResizeHandle;
diff --git a/src/elements/content-sidebar/SidebarResizeHandle.scss b/src/elements/content-sidebar/SidebarResizeHandle.scss
index 399dfdb745..b9d85fb72d 100644
--- a/src/elements/content-sidebar/SidebarResizeHandle.scss
+++ b/src/elements/content-sidebar/SidebarResizeHandle.scss
@@ -12,14 +12,7 @@
     transition: background-color 0.15s ease;
 
     &:hover,
-    &:focus-visible,
     &.bcs-resize-handle-is-dragging {
         background-color: $bdl-box-blue;
-        outline: none;
-    }
-
-    &:focus-visible {
-        outline: 2px solid $bdl-box-blue;
-        outline-offset: -2px;
     }
 }
diff --git a/src/elements/content-sidebar/__tests__/Sidebar.test.js b/src/elements/content-sidebar/__tests__/Sidebar.test.js
index a4fd65fead..1ac875996e 100644
--- a/src/elements/content-sidebar/__tests__/Sidebar.test.js
+++ b/src/elements/content-sidebar/__tests__/Sidebar.test.js
@@ -473,6 +473,95 @@ describe('elements/content-sidebar/Sidebar', () => {
         });
     });
 
+    describe('resizable', () => {
+        const resizableProps = {
+            features: { contentSidebar: { resizable: { enabled: true } } },
+            size: 'large',
+            viewWidth: 1600,
+        };
+
+        test('renders the resize handle and bcs-is-resizable class when feature is on and viewport is large', () => {
+            LocalStore.mockImplementationOnce(() => ({
+                getItem: jest.fn(() => SIDEBAR_FORCE_VALUE_OPEN),
+                setItem: jest.fn(),
+            }));
+            const wrapper = getWrapper(resizableProps);
+
+            expect(wrapper.hasClass('bcs-is-resizable')).toBe(true);
+            expect(wrapper.find('SidebarResizeHandle').exists()).toBe(true);
+        });
+
+        test('does not render the resize handle when the feature flag is off', () => {
+            LocalStore.mockImplementationOnce(() => ({
+                getItem: jest.fn(() => SIDEBAR_FORCE_VALUE_OPEN),
+                setItem: jest.fn(),
+            }));
+            const wrapper = getWrapper({
+                ...resizableProps,
+                features: { contentSidebar: { resizable: { enabled: false } } },
+            });
+
+            expect(wrapper.hasClass('bcs-is-resizable')).toBe(false);
+            expect(wrapper.find('SidebarResizeHandle').exists()).toBe(false);
+        });
+
+        test.each(['small', 'medium'])(
+            'does not render the resize handle on %s viewports even when the flag is on',
+            size => {
+                LocalStore.mockImplementationOnce(() => ({
+                    getItem: jest.fn(() => SIDEBAR_FORCE_VALUE_OPEN),
+                    setItem: jest.fn(),
+                }));
+                const wrapper = getWrapper({ ...resizableProps, size });
+
+                expect(wrapper.hasClass('bcs-is-resizable')).toBe(false);
+                expect(wrapper.find('SidebarResizeHandle').exists()).toBe(false);
+            },
+        );
+
+        test('does not render the resize handle when the sidebar is closed', () => {
+            LocalStore.mockImplementationOnce(() => ({
+                getItem: jest.fn(() => SIDEBAR_FORCE_VALUE_CLOSED),
+                setItem: jest.fn(),
+            }));
+            const wrapper = getWrapper(resizableProps);
+
+            expect(wrapper.find('SidebarResizeHandle').exists()).toBe(false);
+        });
+
+        test('does not apply inline width until the user has dragged', () => {
+            LocalStore.mockImplementationOnce(() => ({
+                getItem: jest.fn(() => SIDEBAR_FORCE_VALUE_OPEN),
+                setItem: jest.fn(),
+            }));
+            const wrapper = getWrapper(resizableProps);
+
+            expect(wrapper.find('aside').prop('style')).toBeUndefined();
+        });
+
+        test('applies inline width once handleResize has been called', () => {
+            LocalStore.mockImplementationOnce(() => ({
+                getItem: jest.fn(() => SIDEBAR_FORCE_VALUE_OPEN),
+                setItem: jest.fn(),
+            }));
+            const wrapper = getWrapper(resizableProps);
+            wrapper.instance().handleResize(550);
+            wrapper.update();
+
+            expect(wrapper.find('aside').prop('style')).toEqual({ width: 550, maxWidth: 550 });
+        });
+
+        test('caps maxWidth at 50% of the viewport width', () => {
+            LocalStore.mockImplementationOnce(() => ({
+                getItem: jest.fn(() => SIDEBAR_FORCE_VALUE_OPEN),
+                setItem: jest.fn(),
+            }));
+            const wrapper = getWrapper({ ...resizableProps, viewWidth: 1200 });
+
+            expect(wrapper.find('SidebarResizeHandle').prop('maxWidth')).toBe(600);
+        });
+    });
+
     describe('on panel change', () => {
         const mockSetItem = jest.fn();
         const mockPanelName = 'activity';
diff --git a/src/elements/content-sidebar/__tests__/SidebarResizeHandle.test.js b/src/elements/content-sidebar/__tests__/SidebarResizeHandle.test.js
new file mode 100644
index 0000000000..85629ea81c
--- /dev/null
+++ b/src/elements/content-sidebar/__tests__/SidebarResizeHandle.test.js
@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { act, fireEvent, render, screen } from '../../../test-utils/testing-library';
+import SidebarResizeHandle from '../SidebarResizeHandle';
+
+describe('elements/content-sidebar/SidebarResizeHandle', () => {
+    const defaultProps = {
+        maxWidth: 800,
+        minWidth: 400,
+        onResize: jest.fn(),
+        width: 400,
+    };
+
+    // pointerdown is wired via React's synthetic system → use fireEvent.
+    // pointermove / pointerup are attached via raw window.addEventListener → dispatch a plain Event.
+    const dispatchWindowPointer = (type, init) => {
+        const event = new Event(type, { bubbles: true });
+        Object.assign(event, init);
+        window.dispatchEvent(event);
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('renders a decorative aria-hidden handle', () => {
+        render(<SidebarResizeHandle {...defaultProps} />);
+        const handle = screen.getByTestId('sidebar-resize-handle');
+        expect(handle).toHaveAttribute('aria-hidden', 'true');
+        expect(handle).toHaveClass('bcs-resize-handle');
+    });
+
+    test('calls onResize with growing width when dragging left from the handle', () => {
+        const onResize = jest.fn();
+        render(<SidebarResizeHandle {...defaultProps} onResize={onResize} width={400} />);
+        const handle = screen.getByTestId('sidebar-resize-handle');
+
+        // Pointer down at clientX=1000, then move left to clientX=950 (delta=50, sidebar grows by 50)
+        fireEvent(
+            handle,
+            Object.assign(new MouseEvent('pointerdown', { bubbles: true, clientX: 1000 }), { pointerId: 1 }),
+        );
+        dispatchWindowPointer('pointermove', { clientX: 950, pointerId: 1 });
+
+        expect(onResize).toHaveBeenCalledWith(450);
+    });
+
+    test('calls onResize with shrinking width when dragging right from the handle', () => {
+        const onResize = jest.fn();
+        render(<SidebarResizeHandle {...defaultProps} onResize={onResize} width={600} />);
+        const handle = screen.getByTestId('sidebar-resize-handle');
+
+        // Pointer down at clientX=1000, then move right to clientX=1080 (delta=-80, sidebar shrinks)
+        fireEvent(
+            handle,
+            Object.assign(new MouseEvent('pointerdown', { bubbles: true, clientX: 1000 }), { pointerId: 1 }),
+        );
+        dispatchWindowPointer('pointermove', { clientX: 1080, pointerId: 1 });
+
+        expect(onResize).toHaveBeenCalledWith(520);
+    });
+
+    test('clamps to minWidth when the drag would go below it', () => {
+        const onResize = jest.fn();
+        render(<SidebarResizeHandle {...defaultProps} minWidth={400} maxWidth={800} onResize={onResize} width={420} />);
+        const handle = screen.getByTestId('sidebar-resize-handle');
+
+        // Pointer down at 1000, drag right by 200 → would be width=220, clamps to minWidth=400
+        fireEvent(
+            handle,
+            Object.assign(new MouseEvent('pointerdown', { bubbles: true, clientX: 1000 }), { pointerId: 1 }),
+        );
+        dispatchWindowPointer('pointermove', { clientX: 1200, pointerId: 1 });
+
+        expect(onResize).toHaveBeenCalledWith(400);
+    });
+
+    test('clamps to maxWidth when the drag would exceed it', () => {
+        const onResize = jest.fn();
+        render(<SidebarResizeHandle {...defaultProps} minWidth={400} maxWidth={800} onResize={onResize} width={780} />);
+        const handle = screen.getByTestId('sidebar-resize-handle');
+
+        // Pointer down at 1000, drag left by 200 → would be width=980, clamps to maxWidth=800
+        fireEvent(
+            handle,
+            Object.assign(new MouseEvent('pointerdown', { bubbles: true, clientX: 1000 }), { pointerId: 1 }),
+        );
+        dispatchWindowPointer('pointermove', { clientX: 800, pointerId: 1 });
+
+        expect(onResize).toHaveBeenCalledWith(800);
+    });
+
+    test('toggles the dragging class while a drag is in progress', () => {
+        render(<SidebarResizeHandle {...defaultProps} />);
+        const handle = screen.getByTestId('sidebar-resize-handle');
+
+        expect(handle).not.toHaveClass('bcs-resize-handle-is-dragging');
+
+        fireEvent(
+            handle,
+            Object.assign(new MouseEvent('pointerdown', { bubbles: true, clientX: 1000 }), { pointerId: 1 }),
+        );
+        expect(handle).toHaveClass('bcs-resize-handle-is-dragging');
+
+        act(() => {
+            dispatchWindowPointer('pointerup', { clientX: 1000, pointerId: 1 });
+        });
+        expect(handle).not.toHaveClass('bcs-resize-handle-is-dragging');
+    });
+
+    test('removes window pointer listeners on unmount', () => {
+        const removeSpy = jest.spyOn(window, 'removeEventListener');
+        const { unmount } = render(<SidebarResizeHandle {...defaultProps} />);
+        unmount();
+        expect(removeSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
+        expect(removeSpy).toHaveBeenCalledWith('pointerup', expect.any(Function));
+        removeSpy.mockRestore();
+    });
+});
diff --git a/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss b/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss
index 42fc6ee04a..b4c244903c 100644
--- a/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss
+++ b/src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss
@@ -162,8 +162,7 @@
 }
 
 // When resizable, the activity feed fills the parent (which is itself fluid via inline width on .bcs)
-.bcs-is-resizable .bcs-activity-feed,
-.bcs-is-resizable.bcs-is-wider .bcs-activity-feed {
+.bcs-is-resizable .bcs-activity-feed {
     width: 100%;
 }
 

From 6dbd5aaef38aaca4760759e2e4252959a181a3a7 Mon Sep 17 00:00:00 2001
From: Jose Gaston <jmcbgaston@gmail.com>
Date: Fri, 15 May 2026 17:06:23 -0400
Subject: [PATCH 3/3] fix(content-sidebar): satisfy Flow on pointer-capture
 method calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Flow's lib doesn't refine `EventTarget` to a type with pointer-capture
methods, so `typeof === 'function'` checks weren't enough. Switch to an
`instanceof Element` refinement (which Flow understands) for
`releasePointerCapture`, with a small `(target: any)` escape for
`hasPointerCapture` — Flow's `Element` lib declares the former but not
the latter.

Also cast `event.pointerId` (number) to string when passing to the
pointer-capture methods: Flow types them as `(string)` even though the
real DOM API takes a number.

Keep the `typeof setPointerCapture === 'function'` guard at runtime —
jsdom doesn't implement it, so dropping the guard breaks unit tests.
---
 .../content-sidebar/SidebarResizeHandle.js     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/elements/content-sidebar/SidebarResizeHandle.js b/src/elements/content-sidebar/SidebarResizeHandle.js
index cb23e10f0f..34d7f6bf3a 100644
--- a/src/elements/content-sidebar/SidebarResizeHandle.js
+++ b/src/elements/content-sidebar/SidebarResizeHandle.js
@@ -35,14 +35,12 @@ const SidebarResizeHandle = ({ maxWidth, minWidth, onResize, width }: Props) =>
     const handlePointerUp = React.useCallback(
         (event: PointerEvent) => {
             setIsDragging(false);
-            const {target} = event;
-            if (
-                target &&
-                typeof target.hasPointerCapture === 'function' &&
-                typeof target.releasePointerCapture === 'function' &&
-                target.hasPointerCapture(event.pointerId)
-            ) {
-                target.releasePointerCapture(event.pointerId);
+            const { target } = event;
+            // Flow lib types pointer-capture methods as `(string)`; the real DOM API takes a number.
+            // Flow's Element doesn't declare `hasPointerCapture` either, so cast for that one call.
+            const pointerId = ((event.pointerId: any): string);
+            if (target instanceof Element && (target: any).hasPointerCapture(pointerId)) {
+                target.releasePointerCapture(pointerId);
             }
             window.removeEventListener('pointermove', handlePointerMove);
             window.removeEventListener('pointerup', handlePointerUp);
@@ -55,8 +53,10 @@ const SidebarResizeHandle = ({ maxWidth, minWidth, onResize, width }: Props) =>
         startXRef.current = event.clientX;
         startWidthRef.current = width;
         setIsDragging(true);
+        // Flow lib types setPointerCapture as `(string)`; the real DOM API takes a number.
+        // jsdom doesn't implement setPointerCapture, so guard the call.
         if (typeof event.currentTarget.setPointerCapture === 'function') {
-            event.currentTarget.setPointerCapture(event.pointerId);
+            event.currentTarget.setPointerCapture(((event.pointerId: any): string));
         }
         window.addEventListener('pointermove', handlePointerMove);
         window.addEventListener('pointerup', handlePointerUp);