Resizable Panels#

Element Web's left-panel (room list sidebar) uses a resizable, collapsible panel system built on the react-resizable-panels library. It replaced a bespoke Resizer class that had been in matrix-react-sdk since 2018. The migration landed in March 2026 (PR #32742) and the legacy room list code was fully removed in July 2026 (PR #34040).

Architecture#

The resize system is layered across three packages:

packages/shared-components/src/resize/ module#

Three presentational components wrap react-resizable-panels primitives and accept a vm prop following the ViewModel<Snapshot, Actions> pattern:

• GroupView — wraps react-resizable-panels' Group; extracts the left-panel size from the library's onLayoutChanged callback and forwards it to the view model via onLeftPanelResized(newSize) 1.
• LeftResizablePanelView — wraps Panel; reads initialSize and isCollapsed from the view-model snapshot; passes inert when collapsed; uses groupResizeBehavior="preserve-pixel-size" 2.
• SeparatorView — wraps Separator; renders a thick "bar" with drag icon when collapsed and a 1 px border when expanded; pointer events delegate to the view model to distinguish click from drag 3.

The shared snapshot type ResizerViewSnapshot carries two fields: isCollapsed: boolean and initialSize?: number (percentage).

ResizerViewModel (app layer)#

apps/web/src/viewmodels/structures/ResizerViewModel.ts is the single concrete view model. It implements all three action interfaces (SeparatorViewActions, LeftResizablePanelViewActions, GroupViewActions) and owns all state-persistence and collapse logic 4.

State Persistence#

Panel state is saved to SettingsStore at SettingLevel.DEVICE (device-local, not synced across devices) using two settings 5:

The two settings are kept separate so that the panel can restore to its last non-zero width after an app reload even when it was collapsed at exit 6.

On startup, getInitialState() checks RoomList.isPanelCollapsed (and AutoCollapse.shouldStartCollapsed()) first; if true it sets initialSize: 0. Otherwise it reads RoomList.panelSize as the starting size.

During resize, onLeftPanelResized() 7:

1. Skips the very first event (fired on initial render) to avoid overwriting stored values.
2. Rounds fractional widths to prevent subpixel blur (PR #33052).
3. Writes RoomList.panelSize only when newSize !== 0; always writes RoomList.isPanelCollapsed.

Resize events during a drag are debounced 50 ms via onLeftPanelResize 8; the onLayoutChanged-based onLeftPanelResized fires on drag end.

Collapse / Expand#

• Single click on separator → expands to RoomList.panelSize ?? 100% 9.
• Double click on separator → collapses via panelHandle.collapse() 10.
• Click vs drag discrimination — a MouseClickHandler utility 11 tracks onPointerMove between onPointerDown and onPointerUp; if movement is detected it suppresses the click handler.
• Auto-collapse — an AutoCollapse orchestrator (separate from user interaction) can collapse or expand the panel programmatically, e.g., when a call starts or the window is resized below a threshold (PR #32964).

Room List Section State#

Room list section expansion state (collapsed/expanded per-section) is persisted separately via RoomList.SectionExpansionState (PR #34351, merged 2026-07-29). Without this, sections reset to expanded on every reload (see issue #34317).

Legacy Resizer (Removed)#

The original Resizer class in matrix-react-sdk/src/resizer/resizer.ts attached a mousedown listener to the container element, called event.preventDefault() to suppress native drag behavior 12, and manually tracked mousemove/mouseup/mouseleave on document.body 13. It relied on FixedDistributor for flex-based size calculation. The new implementation replaces all of this with react-resizable-panels + pointer events, eliminating several CSS :hover pseudo-class bugs inherent in the preventDefault() approach.