WP-Admin: Mobile Preview Doesn't Stack Columns

[dcoleonline]

Steps to reproduce the behavior

In my testing, this only happens when the site is on atomic OR when a simple site has the Dashboard Appearance > Show wp-admin pages if available setting is activated at https://wordpress.com/me/account

1. Create a new page
2. Add a columns block or a blog posts block with content in multiple columns. I used 4 columns in my test.
3. Click the Preview button and select the mobile view
4. See that the columns do not stack

What I expected to happen

The columns would stack.

What actually happened

The columns shrink to show the content in a narrow view, but they do not stack.

Context

4050919-zen (we should notify them once this has been investigated)

Since the columns did not stack in the preview, a customer was hesitant to move forward with publishing their content. They assumed they were making a mistake somewhere, when in actually, the editor was not showing a true preview of the mobile view.

Is this specific to the applied theme? Which one?

No

Does this happen on simple or atomic sites or both?

Both

Is there any console output or error text?

I don't see anything that appears to be relevant to this issue.

Level of impact (Does it block purchases? Does it affect more than just one site?)

Affects more than one site, does not block purchases.

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

This is what the mobile preview of the blog posts block looks like when site is on Atomic OR when a simple site has the Dashboard Appearance > Show wp-admin pages if available setting activated:

This gives a false preview, so it should not look this way.

This is what the mobile preview of the blog posts block looks like on a simple site with the Dashboard Appearance > Show wp-admin pages if available setting deactivated:

This is a true representation of what the mobile/phone view will look like on the live site, so this is what it should look like, regardless of the dashboard appearance setting or if the site is on atomic.

[mrfoxtalbot]

Thank you for the report! @dcoleonline!

I tested this and was able to confirm that it is ONLY happening on WordPress.com sites and ONLY in WP-Admin (since Calypso has its own preview flow). I was able to reproduce this using several themes, TwentyTwenty and TwentyTwentyone among them:

This is what the mobile preview looks like on a testing WP.org site, with and without the Gutenberg plugin (version 10.8). It will collapse into a single column: