Make the sidebar on entity edit forms resizable

Just want to ask if expected behavior

So I'm on the branch for 4.0.x version
Go to a random Article and drag the sidebar around
If I'm quick about it I can make the center column, very briefly, be behind the sidebar.

So I'm on the branch for 4.0.x version
Go to a random Article and drag the sidebar around
If I'm quick about it I can make the center column, very briefly, be behind the sidebar.

I don't really understand what you are referring to. Maybe you can share a video/screenshot.

Hey @saschaeggi,

This looks good to me. I've attached a video showing the feature working nicely.

Tested on:

• Chrome: Version 126.0.6478.115
• MacOS 14.3.1

Also tested editing an article on an iPhone SE, and whilst this feature isn't active on mobile - can't see any bugs that have been introduced.

Thanks for the work on this.

@saschaeggi Changes looks good to me. I have tested it on Chrome, Safari and Firefox browser, it works fine. Attaching screenshot for reference as well.

Also I have one suggestion can we use the min-width to be the one which shows up when page is opened by default which is around 360px?

@siddharthjain

Also I have one suggestion can we use the min-width to be the one which shows up when page is opened by default which is around 360px?

That's a good suggestion, I've pushed a change so we ignore the size for smaller viewports 👍

Needs a final review 👀

Hey @saschaeggi,

Just checked the latest commit and can confirm the sidebar starts at 360px when first loading a page.

I am able to drag it smaller than 360px though if wanted so if it's supposed to be a min-width of 360px this might need some more work. Perhaps I'm misunderstanding the change though.

Screenshot attached showing it being resized down to 239px wide.

Thanks

@Hebl you can resize down to

240px

that is to be expected 👍

We just show a unified min-size on smaller viewports (e.g. mobile phones) to avoid issues with bigger sizings.

Ah great, thanks @saschaeggi.

Checked mobile and looks good there too. Happy to approve this.

@saschaeggi

Changes looks good now, now the min-width is around 240px, thanks!

Thanks y'all 👏

This feature is nice, but when the sidebar is closed it leaves a gap where the sidebar was - the page width doesn't adjust to maximize the space when it's closed.

@teknocat that was fixed in the latest 3.x and 4.x dev builds 👀

@saschaeggi ok good to know. Hopefully that makes it into another release candidate soon :)

drupaler99 → changed the visibility of the branch 3447257-make-the-sidebar-resizable to hidden.

If anyone else is looking into why Layout Builder broke after this was merged in, you can find a patch here 🐛 Uncaught TypeError in sidebar.js after updating to the latest Gin theme RTBC

This is not working well for desktop with touch enabled screen. When resizing the sidebar, it is possible to loose the save button under the sidebar without any possibility to show it back again. Sorry but this needs more work...

Please create a new feature request instead so we can work on adding support (or at least somebody which owns such a device can!)

Basic functionality was shipped, so closing this one again.

Thanks,

Well, thanks for your reply but I do not agree with you. I do not want to ask for a new feature when this is clearly this one that created the bug... How can we state this one is "fixed" when it creates a bug for people with touch enabled screen that was not there before introducing this new feature?

@saschaeggi I created a new bug report like you asked : https://www.drupal.org/project/gin/issues/3463177 🐛 Resizable sidebar can overlap the save button on touch enabled device Needs work

By the way, if anybody has this issue when the sidebar overlaps, you can always close it using the Alt-s keyboard combination but this is not intuitive for users.

Thanks

@saschaeggi

Could you have a look at the related bug report issue this sidebar resizing created on touch devices please : https://www.drupal.org/project/gin/issues/3463177 🐛 Resizable sidebar can overlap the save button on touch enabled device Needs work

Thx