Site Editor: Pages three pane view overlaps on certain screen sizes

[ndiego]

Description

When accessing the Pages screen in the Site Editor on smaller screens, such as tablets, two panes overlap. See the video for a walkthrough.

Step-by-step reproduction instructions

1. Use TT4 and the latest version of Gutenberg
2. Open the Site Editor and navigate to the Pages screen
3. Make the browser width smaller, either manually or using the inspector (like in the video)
4. Notice that the two panes overlap

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/4832319/b00bac8e-a058-4b48-8c31-89b6ea3ff765

Environment info

• WordPress 6.5
• Gutenberg 18.4.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

Noting this is overall tracked here: https://github.com/WordPress/gutenberg/issues/60847

[aatanasovdev]

I'd like to discuss the expected result of this task. Reviewing https://github.com/WordPress/gutenberg/issues/60847, it seems that the second and third panes will be a scrollable area, which requires changing the markup (wrapping the content and the canvas).

However, the Layout component is used by all Site Editor Data Views, which will require testing each of them. Considering that I'm not sure whether, in this task, we'll follow the new responsive approach or a temporary solution should be implemented.

[stokesman]

it seems that the second and third panes will be a scrollable area, which requires changing the markup (wrapping the content and the canvas).

It’s not necessarily the case the markup will have to change.

Here’s a quick bit of CSS that allows for horizontal scrolling without markup changes and prevents the panes from overlapping. It can be pasted into styles in dev tools if anyone cares to experiment.

.edit-site-layout__content {
    overflow: auto;
}

.interface-navigable-region.edit-site-layout__sidebar-region {
    position: sticky;
    left: 0;
    background: #1e1e1e;
}

.edit-site-layout__content {
    padding-inline: 0 16px;
}

.edit-site-layout__area,
.edit-site-layout__canvas-container {
    min-width: 320px;
    z-index: auto;
}

@media (min-width: 782px) {
    .edit-site-layout__canvas {
        width: 100%;
    }
}

[aatanasovdev]

@stokesman, thank you for suggesting this approach, but it will make the entire container (the tree panes) a scrollable area, and I'm not sure if this is the right direction in terms of the best possible user experience. Another opinion would be helpful.