Site Editor: Tablet Preview cuts off bottom part of template

[annezazu]

Description

In the Site Editor, using the Preview option to see the Tablet view cuts off the bottom part of the template being edited. This only happens with the Site Editor (rather than Template editor).

Originally noted in core-test slack here: https://wordpress.slack.com/archives/C03B0H5J0/p1641303448050400?thread_ts=1641303130.049800&cid=C03B0H5J0

Step-by-step reproduction instructions

1. Open Site Editor
2. Select Preview.
3. Select Tablet option.
4. Notice you can't see the footer.

Screenshots, screen recording, code snippet

Updated video:

preview.cut.off.mov

Environment info

• WordPress 5.9 RC1
• Problem with both Gutenberg 12.2 activated and deactivated.
• Twenty Twenty-Two
• MacOS
• Chrome

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]

Updated after testing with RC1 :)

[Mamaduka]

Unfortunately, I couldn't reproduce the issue. So please, let me know if I'm missing any steps.

Tested with WP 5.9 RC 1 and Gutenberg trunk.

Screencast

CleanShot.2022-01-05.at.20.32.51.mp4

[annezazu]

@Mamaduka curious what browser you're using and if that makes a difference here? I was using Chrome and can still replicate today :D

[Mamaduka]

Chrome/MacOS

[annezazu]

From @costdev in slack:

Yeah I can reproduce 37708 on Chrome/Windows (1920x1080). Seems to be a simple issue of the height of the iframe.
Not an actual fix, but it seems that applying this to the iframe does the trick:
max-height: calc(100vh - 144px - 60px - 25px);
144px is the top + bottom margin of the iframe
60px is the height of .edit-site-header
25px is the height of .interface-interface-skeleton__footer

[piotrbak]

I'm also able to reproduce it on Chrome 1920x1080.

[juhi123]

I also could reproduce this issue on Mac OS Chrome.

[Mamaduka]

@jasmussen, @jameskoster, do you mind having a look at this? I'm pretty sure it's an overflow issue, but I can't point my finger on it 😄

[jameskoster]

Yup it's cause by this line: https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-site/src/components/editor/style.scss#L35 which was added in #35974. Perhaps @kevin940726 can confirm why we need that rule and if there's an alternative approach we could try.