Modal height too small on medium / large screens

[afercia]

Describe the bug

On small screens (with a viewport width up to 599 pixels) the modal component takes all the available space i.e. it is "full screen", which sounds reasonable.

However, on screens with a viewport width larger than 599 pixels, the modal max-height reserves some top and bottom space set in pixels. This is a fixed value that makes the modal height too small on some viewports.

Actually, on some viewports the modal height is just too small. There is space available to make it taller and show more content. For example, this is too small:

The modal max-height is based on a CSS calc() that uses the scss variable $header-height:

max-height: calc(100% - #{ $header-height } - #{ $header-height });

In the WordPress 5.4 Gutenberg, this variable is set to 56 pixels: $header-height: 56px;

After the G2 redesign it is now even bigger: $header-height: 60px; so the modal height will be even smaller.

I'm not sure using a fixed value in pixels makes much sense in the first place. Ideally, the max-height should adapt to the available viewport height and try to always show as much as possible of the modal content.

I'd like to propose to review the max-height value:

• either drastically simplify and use something like max-height: 90%;
• or introduce more intermediate media breakpoints and provide an increasing max-height value as the viewport height decreases

I'd lean towards the first option because it's simpler and does its job.

To reproduce
Steps to reproduce the behavior:

• open a Modal component
• if you don't have a Modal component implementation you can install and activate the Yoast SEO plugin and:
  • edit a post
  • open the Yoast SEO sidebar by clicking the "Yoast SEO" button in the Editor top toolbar
  • click on Google Preview
  • a modal opens (it uses the modal from @wordpress/components )
• observe the modal height at various viewport sizes

Expected behavior
The modal height to be taller.

Editor version (please complete the following information):

• WordPress version: 5.4
• tested on both default block editor and Gutenberg plugin

[afercia]

Well, actually this can be tested with the built-in modals e.g. the Keyboard shortcuts modal:

[jasmussen]

Fixed by #27362.