Add resizable sidebar by shaunandrews · Pull Request #2853 · Automattic/studio

shaunandrews · 2026-03-19T18:05:28Z

Proposed Changes

Add drag-to-resize on the sidebar's right edge with a custom useSidebarResize hook
Sidebar width is continuously adjustable between 150px and 400px
Dragging below 100px snaps the sidebar closed; reopening restores the last width
Width persists to localStorage across sessions
Blue 3px indicator line appears on hover/drag to signal the resize handle
Updated toggleMinWindowWidth IPC handler to use the current sidebar width instead of the hardcoded constant
CSS transitions are disabled during drag to prevent lag

Testing Instructions

Hover over the right edge of the sidebar — a blue line should appear
Drag to resize the sidebar between 150px and 400px
Drag below ~100px — sidebar should snap closed
Use the toggle button to reopen — should restore your last dragged width
Quit and relaunch the app — sidebar width should persist
Toggle the sidebar closed/open — window should resize by the correct amount

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Address persistence approach (localStorage vs IPC), toggle window resize math, transition-during-drag conflict, collapsed state drag target, and inline style migration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Custom drag-to-resize sidebar with snap-to-close behavior, localStorage persistence, and a blue hover indicator line. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

katinthehatsite

Generally, the changes look good to me 👍

I noticed one thing where in some languages that use longer transations, you can see the running sites being mushed together:

In my test, I switched to Ukrainian and resized the sidebar to as narrow as I could before it hides.

Additionally, I would be curious to test this on Windows. I can take a look into that tomorrow.

…idebar

katinthehatsite · 2026-04-14T13:20:00Z

For the issue in the sidebar with the sites running, I see it now has been resolved:

katinthehatsite · 2026-04-14T13:35:42Z

@Automattic/yolo could you please review? I made some changes based in my recommendations but I would appreciate another pair of eyes.

bcotrim · 2026-04-14T13:43:04Z

+} from 'src/constants';
+
+export function getSavedSidebarWidth(): number {
+	const saved = localStorage.getItem( LOCAL_STORAGE_SIDEBAR_WIDTH_KEY );


Why did we decide on a local storage approach?
We already have some UI properties (window size) living in the app.json config file.
I don't have anything against local storage, I just believe it should be consistent with our other properties.

I don't have the answer specifically for that bit since it was not originally my PR but it makes sense to be consistent with our other properties. I will check how we can align our approach here 👀

I had a chance to check this a bit further and I think the localStorage approach would be all right here. The sidebar width uses localStorage rather than app.json because it's renderer-side state: it's read synchronously at component init (allowing it to be passed directly as a useState initializer) and never needed by the Main process. windowBounds lives in app.json because Electron's Main process must restore the window size before the renderer exists. Moving sidebar width to app.json would introduce an async IPC to initialize a CSS value, requiring a loading state and added complexity.

That makes a lot of sense, thanks for the explanation! 👍

gcsecsey

The changes make sense to me, and it overall works well. I added a comment on the snapping.

gcsecsey · 2026-04-14T13:47:35Z

+			if ( finalWidth < SIDEBAR_SNAP_THRESHOLD ) {
+				// Snap closed — restore the last good width for when it reopens
+				setSidebarWidth(
+					dragStartWidth.current > SIDEBAR_MIN_WIDTH ? dragStartWidth.current : SIDEBAR_WIDTH
+				);
+				if ( isSidebarVisible ) {
+					toggleSidebar();
+				}
+				return;
+			}


To me, the UX for snapping the sidebar closed feels a bit strange. When trying to snap it closed, the current threshold feels a bit too high, the user needs to drag the line almost half the way before it registers as snapped. The content beneath also reflows when this happens.

CleanShot.2026-04-14.at.14.41.14-converted.mp4

I'm wondering if we could omit this snap-to-close behavior completely and just rely on the toggle button on top?

I ended up removing the snap behaviour so that now it looks like this:

Screen.Recording.2026-04-21.at.11.23.51.AM.mov

Let me know what you think!

wpmobilebot · 2026-04-14T13:55:33Z

📊 Performance Test Results

Comparing 16a9189 vs trunk

app-size

Metric	trunk	`16a9189`	Diff	Change
App Size (Mac)	1490.97 MB	1490.98 MB	+0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	`16a9189`	Diff	Change
load	1848 ms	1858 ms	+10 ms	⚪ 0.0%

site-startup

Metric	trunk	`16a9189`	Diff	Change
siteCreation	10135 ms	10122 ms	13 ms	⚪ 0.0%
siteStartup	5942 ms	5955 ms	+13 ms	⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

…idebar

katinthehatsite

The changes look good, I also re-requested the review from two other reviewers.

nightnei · 2026-04-21T15:45:05Z

+				isMac() && 'pt-[10px]',
+				! isMac() && 'pt-[38px]',


Why do we need it?

Let me double-check, if I am not mistaken this was related to resolving conflicts with trunk 👀

I removed it as it seems to be an unintended leftover after the conflict resolution

Co-authored-by: Volodymyr Makukha <nei.css@gmail.com>

nightnei

Great improvement, I will increase sidebar width right after this PR is merged :)

… resizable-sidebar

Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com>

bcotrim

LGTM 👍
Thanks for completing the changes @katinthehatsite

shaunandrews and others added 3 commits March 19, 2026 13:35

Add resizable sidebar design spec

5ee4c58

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Update resizable sidebar spec after review

e64c811

Address persistence approach (localStorage vs IPC), toggle window resize math, transition-during-drag conflict, collapsed state drag target, and inline style migration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add resizable sidebar with drag handle and persistence

6944938

Custom drag-to-resize sidebar with snap-to-close behavior, localStorage persistence, and a blue hover indicator line. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

shaunandrews added the Proof of Concept label Mar 19, 2026

shaunandrews and others added 2 commits March 19, 2026 14:09

Remove design spec from PR

f9f43cb

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Increase sidebar min width and prevent footer text wrapping

da52e8f

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

shaunandrews added Enhancement and removed Proof of Concept labels Mar 19, 2026

shaunandrews marked this pull request as ready for review March 19, 2026 18:18

wojtekn assigned shaunandrews Mar 20, 2026

katinthehatsite reviewed Mar 23, 2026

View reviewed changes

Comment thread apps/studio/src/hooks/use-sidebar-resize.ts Outdated

Merge branch 'trunk' of github.com:Automattic/studio into resizable-s…

05815db

…idebar

Add shared utility function

6caa470

katinthehatsite requested a review from a team April 14, 2026 13:35

bcotrim reviewed Apr 14, 2026

View reviewed changes

gcsecsey reviewed Apr 14, 2026

View reviewed changes

katinthehatsite and others added 3 commits April 16, 2026 09:45

Merge branch 'trunk' into resizable-sidebar

e66bf69

Merge branch 'trunk' of github.com:Automattic/studio into resizable-s…

0a67d45

…idebar

Remove snap behaviour

6f36355

katinthehatsite requested review from bcotrim and gcsecsey April 21, 2026 15:25

Merge branch 'trunk' of github.com:Automattic/studio into resizable-s…

29d3808

…idebar

katinthehatsite approved these changes Apr 21, 2026

View reviewed changes

nightnei reviewed Apr 21, 2026

View reviewed changes

Comment thread apps/studio/src/components/app.tsx Outdated

Undo the unintended changes

401dfa4

Apply suggestion from @nightnei

a12a4ab

Co-authored-by: Volodymyr Makukha <nei.css@gmail.com>

nightnei approved these changes Apr 21, 2026

View reviewed changes

Kateryna Kodonenko added 3 commits April 21, 2026 13:09

Fix linter

ea4327b

Merge branch 'resizable-sidebar' of github.com:Automattic/studio into…

10fae44

… resizable-sidebar

Fix linter

e00c4ff

bcotrim reviewed Apr 21, 2026

View reviewed changes

Comment thread apps/studio/src/components/app.tsx Outdated

katinthehatsite and others added 2 commits April 21, 2026 19:55

Update apps/studio/src/components/app.tsx

e39dfed

Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com>

Merge branch 'trunk' into resizable-sidebar

4b44fa3

bcotrim approved these changes Apr 21, 2026

View reviewed changes

Merge branch 'trunk' into resizable-sidebar

16a9189

katinthehatsite merged commit 232d651 into trunk Apr 21, 2026
10 checks passed

katinthehatsite deleted the resizable-sidebar branch April 21, 2026 19:01

Conversation

shaunandrews commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Testing Instructions

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

katinthehatsite commented Apr 14, 2026

Uh oh!

katinthehatsite commented Apr 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gcsecsey left a comment

Choose a reason for hiding this comment

Uh oh!

gcsecsey Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nightnei left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bcotrim left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

shaunandrews commented Mar 19, 2026 •

edited

Loading

gcsecsey Apr 14, 2026 •

edited

Loading

wpmobilebot commented Apr 14, 2026 •

edited

Loading