Dashboard layout issue at breakpoints between layouts

[johnfmorton]

Description

Control panel goes freaking crazy trying to adjust its layout sometimes. See this video.

http://share.jmx2.com/DbprB8

Steps to reproduce

1. Logged into control panel with default widgets showing.
2. Resize the window near to the point that would cause the widgets to relayout. At a certain point, it goes back and forth between 2 layouts causing the world to fall apart.

Additional info

• Craft version: RC10.1
• Google Chrome version: Version 63.0.3239.132
• PHP version: 7.1
• Database driver & version: n/a
• Plugins & versions:

[missmatsuko]

I'm still having this issue. Especially when my browser is at ~1550px wide.

• Craft version: Craft CMS 3.0.20
• Google Chrome on Mac version: Version 68.0.3440.106 (Official Build) (64-bit)

[brandonkelly]

@missmatsuko same exact behavior as in the video above?

[missmatsuko]

@brandonkelly Yes. When my window is at about 1550px wide, the columns flicker like in the video above.

[brandonkelly]

@missmatsuko Can you send us a database backup, and your composer.json + composer.lock files (if this is Craft 3), and tell us which user account you’re logging in with? ([email protected])

[missmatsuko]

@brandonkelly Sorry about the delay, I've been trying to reproduce the issue and it seems to happen only on my work computer. I think we can close it for now and if I can figure out the cause or conditions, then I'll let you know.

[brandonkelly]

Ok, sounds good.

[proimage]

I'm getting this issue as well. It happens at very specific widths/heights. It requires that the browser be within [scrollbar_width] pixels around where a change in the number of dashboard columns takes place. The height also needs to be a specific height—not a fixed pixel value, but one based on the height of the dashboard widgets.

Let's say we're increasing the browser width. When we reach the media query width for adding a new widget column, the existing widgets get squeezed into narrower columns to make room for the new column. This makes them taller. If their new height is taller than the available space, a vertical scrollbar appears. This takes away (in my case) about 20px of width, which pushes the browser width beneath the media query it just passed a microsecond ago, reducing the number of columns and removing the need for a vertical scrollbar, which gives the browser more width, which allows an extra columns, etc etc.

A simple but "ugly" fix would probably be to have the vertical scrollbar always show, even when not necessary. A more complicated fix, I leave as an exercise to the developers. ;)

[brandonkelly]

@proimage Ah that makes sense. Maybe I’ll just have Craft wait until the browser is an extra ~20px wider than it really needs to be when adding a new column to the layout, so that we can be sure it’s still going to be enough room if a scrollbar were to appear.

[proimage]

Someday...