Overview

The Drupal Canvas right sidebar, where component props are edited, currently has a fixed width. Users cannot adjust it to fit their workflow or screen size.

Proposed resolution

Make the right sidebar resizable so users can drag a handle to change its width. The chosen width should be remembered across reloads. The sidebar should have a minimum and maximum width.

User interface changes

Only local images are allowed.

Issue fork canvas-3574994

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

lauriii created an issue. See original summary.

lauriii opened merge request !628

balintbrews made their first commit to this issue’s fork.

balintbrews’s picture

balintbrews
he/him/his
Location Netherlands 🇳🇱
commented
Status: Active » Reviewed & tested by the community

  • lauriii committed 29cdd8ce on 1.x 
    fix: #3574994 Resizable right sidebar for Drupal Canvas

By: lauriii
By...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Fixed » Patch (to be ported)
Issue tags: +Needs screenshots

For significant UI changes like this (this sounds awesome BTW 😄), please always post a screenshot/GIF/video of it in action. It makes future git/issue queue archeology so much simpler and faster! 🙏

jessebaker made their first commit to this issue’s fork.

jessebaker opened merge request !633

mayur-sose’s picture

mayur-sose commented

Verification Results

ID Test Scenario Steps Expected Result Status
1.1 Resize Handle Visibility Open the Canvas editor and hover over the left edge of the right sidebar. A visible resize handle/cursor (e.g., col-resize) appears. Pass
1.2 Horizontal Dragging Click and drag the handle to the left to expand, then to the right to shrink. The sidebar width adjusts smoothly in real-time as the mouse moves. Pass
1.3 Minimum Width Constraint Drag the sidebar to the right as far as possible. The sidebar stops resizing once it hits the Minimum Width. It cannot be hidden entirely. Pass
1.4 Maximum Width Constraint Drag the sidebar to the left as far as possible. The sidebar stops resizing once it hits the Maximum Width (e.g., 50% of the screen). Pass
1.5 Content Responsiveness Expand the sidebar to its maximum width while a component form is open. The fields inside the sidebar (text inputs, dropdowns) stretch to fit. Pass
1.6 Persistence: Page Reload Resize the sidebar to a custom width and refresh the browser tab. The sidebar returns to the custom width set by the user. Pass
1.7 Persistence: Session Storage Resize the sidebar, close the browser, and reopen the Canvas editor. The custom width is remembered across sessions (LocalStorage/Cookies). Pass
1.8 Layout Stability Rapidly resize the sidebar back and forth. The Canvas preview area adjusts its width dynamically without flickering. Pass
1.9 Double Click Reset Double-click the resize handle. The sidebar returns to its default factory width. Pass
2.0 Open-close left sidebar First Resize right sidebar, then open-close left sidebar. Right sidebar width should remains constant while left sidebar is toggled, but here, right sidebar width changes. Fail
jessebaker’s picture

jessebaker commented
Status: Patch (to be ported) » Needs review

Spotted a couple of minor spacing issues, raised a second MR to address.

jessebaker’s picture

jessebaker commented
Issue summary: View changes
mayur-sose’s picture

mayur-sose commented

@wim-leers @jessebaker Please check if 2.0 failed test case is expected behaviour or not.

jessebaker’s picture

jessebaker commented

The behaviour described in 2.0 doesn't really bother me - it feels fairly natural to adjust things based on percentage rather than a fixed width.

Closing the left bar affords more space and that extra space is shared between the main editor frame and the contextual panel, rather than only applied to the editor frame. I don't think it warrants another round on this as it's not impacting the use of this feature and would require work to figure out how to make the split using specific pixel values for very little benefit.

  • jessebaker committed 96fc3d98 on 1.x 
    feat: #3574994 Resizable right sidebar for Drupal Canvas

By: lauriii
By...
jessebaker’s picture

jessebaker commented
Status: Needs review » Patch (to be ported)
Issue tags: -Needs screenshots

lauriii opened merge request !638

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Patch (to be ported) » Needs review

I agree that this isn't a big deal. However, after testing the MR, it does feel a bit cleaner and more natural to retain the right sidebar width.

nagwani’s picture

nagwani commented
Issue tags: +triaged