[3.x]: Sidebar scrolling is a bit confusing/difficult

[KarlBishop]

What happened?

When editing entries that have a lot of stuff in the sidebar, at first glance it appears that some content is not accessible.

This happens when the sidebar is taller than the screen height. And is exacerbated because I'm slightly motor-impaired.

My motor-impairment means I tend to use the visible scrollbar at the side of the browser window (because clicking and dragging is easier than using a scroll-wheel).

When I click and drag the scrollbar, the sidebar docks to the right-hand-side of the screen and does not scroll. This means sidebar content beyond the screen height cannot be reached using this method.

I tried using middle-click scrolling (aka auto-scrolling) and found the same behaviour, even when the middle-click is engaged while hovering over the sidebar.

At this point I thought it was not possible to reach the lower sidebar content at all but then, kind of by accident, I found that if I middle-click scroll to the bottom of the page, then release and re-engage the middle-click whilst hovering over the sidebar, I can at last scroll it. But I reckon this is a bit tricky to figure out. It might be better if, when the sidebar is taller than screen-height, it did not dock to the side and just scrolled with the main content 🤔🤷‍♂️

Craft CMS version

Craft Pro 3.8.11

PHP version

8.1.19

Operating system and version

Linux 5.10.0-0.deb10.17-amd64

Database type and version

MariaDB 10.11.5

Image driver and version

Imagick 3.7.0 (ImageMagick 7.1.1-8)

Installed plugins and versions

No response

[brandonkelly]

Thanks for pointing that out!

I’ve just improved the scrolling behavior for detail panes and left-hand page sidebars for the next Craft 3 and 4 releases: they now scroll along with the page up until the bottom of their containers are reached, at which point they will stick to the bottom of the viewport. They never get their own scroll areas, so you shouldn’t run into any more strange scrolling behavior with them.

[KarlBishop]

Fantastic, thanks @brandonkelly !

[brandonkelly]

Craft 3.9.2 and 4.5.4 are out with that change!

[jamesmacwhite]

I think this has had a negative impact. This is an example of our Formie submissions screen. We have a lot of forms and hence items in the sidebar, but we can no longer scroll and see all form submission items in the left hand column under 3.9.2.

There are many more element index items where it is getting off.

You can see the items that have been cut off, through the <li> items in the source code.

I'd imagine the scenario occurs when the sidebar item length is greater than the main content area length. On the all submissions view, the sidebar is fine because the all submissions list in the content area is greater in height.

I can report to Formie if plugins need to be updated to work better with the changes provided in 3.9.2 and 4.5.4 releases?

[jamesmacwhite]

I think it goes further than formie, when the content panel has little information, another example

When the left column has more length than the main content area, this change isn't ideal.

[brandonkelly]

Thanks for pointing that out @jamesmacwhite! I’ll adjust…

[jamesmacwhite]

Thank you!

[KarlBishop]

I just got around to trying 3.9.2 and realised it didn't solve my issue yet. Now when I scroll to the bottom of the screen, the sidebar remains cut off - I can only scroll as far as the main content goes - and it's no longer possible to use a middle-click to scroll the sidebar further.

Probably the same cause as @jamesmacwhite's issue but here's a screenshot of my scenario too, fwiw:

[brandonkelly]

Craft 3.9.3 and 4.5.5 are out with an additional fix that should solve these.

[KarlBishop]

The scrolling issue is fixed for me on 3.9.3!

But it looks like the version number didn't increment properly - my control panel still thinks it's on 3.9.2