Firefox and Internet Explorer 11: Media modal controls section cut off at larger window sizes

[sabernhardt]

When using the "Insert from URL" feature for adding images in WordPress 5.3, the bottom "media-toolbar" container can cover the last settings controls in the scrolling container.

On that screen, the gray border line covers the "Link To" buttons group if:

1. the window width is at least 783 pixels and
2. either the "Image URL" or "None" button is selected.

At 782 and narrower, there is a bottom margin on those buttons that can provide just enough space. (Other browsers give plenty more space with a 32px bottom padding.)

Steps to reproduce (inserting image from URL):

• Use the Classic Editor.
• Edit a post.
• Click the "Add Media" button.
• Select "Insert from URL" from the side menu (the menu is found on the side if the window is at least 783 pixels wide).
• Paste a URL into the field so the UI controls appear. ​https://via.placeholder.com/200
• Scroll to the bottom of the settings container, and select each button.

This overlap may be found also on the Video Details screen, before a subtitle track is assigned. (Use the Video widget and click the "Edit Video" button to reach that screen.)

See additional comments on ticket #48087: https://core.trac.wordpress.org/ticket/48087#comment:15

[sabernhardt]

"Link To" buttons hidden behind border line

[sabernhardt]

"Link To" buttons with Custom URL input below

[afercia]

After some research, this appears to be an area where browser implementations differ due to lack of clarity in the old CSS 2.1 spec.

As mentioned in ticket:48087#comment:15 the element with overflow: auto has a bottom padding of 32 pixels:

• this padding is honored only by webkit browsers
• not honored by IE 11
• not honored by latest Firefox as well

Relevant discussion on the w3c/csswg-drafts GitHub:

[css-overflow-3] Clarify padding-bottom in overflow content
​https://github.com/w3c/csswg-drafts/issues/129
Created on 21 May 2016: discussion is still ongoing and it's not clear to me what the consensus is.

There's a related (closed) Firefox ticket on the Mozilla tracker that was opened 8 years ago on April 2012:
​https://bugzilla.mozilla.org/show_bug.cgi?id=748518

Thus, browser implementations still differ today.

Seems the best option is to change the WordPress implementation and not set the padding on the scrolling element. We could try to:

• either set a bottom margin on the last child
• or use an ::after pseudo element with the desired height to make room at the bottom of the scrolling element
• either way, the 32 pixels value seems arbitrary to me: more a magic number rather than based on something meaningful and should probably be reduced

[afercia]

48378.diff​ implements the first part mentioned on ticket:48087#comment:15 by making the URL field scroll into view when clicking on the "Custom URL" button.

[sabernhardt]

I see Edge does not honor the bottom margin either.

Another option is to add a value to the bottom property instead of bottom padding. The top value could also increase to more than 70px (the span height for the URL input totals 82 pixels at the intended font size).

[afercia]

There are a couple more places where a bottom padding is set to an element with overflow: auto, namely:

• the sidebar in the media modal 3 columns view
• the right sidebar in the modal with the image editor

See screenshots below, where the area that should have padding is highlighted in red. In all these cases, Firefox and Internet Explorer ignore the padding. To test, compare the rendering in Chrome and Firefox (or IE on Windows).

[afercia]

48378.2.diff​ builds on the previous patch and:

• checks the input exists before using a DOM method on it (scrollIntoView())
• uses a CSS after pseudo element instead of padding-bottom to reserve some space at the bottom of the affected elements

For the CSS part: in this specific case I opted to repeat the same ruleset for each selector, to make very clear why it is used and also added inline comments accordingly.

Looks good for commit to me. Will wait till Beta 1 tomorrow to give some time for anyone willing to test.

[sabernhardt]

image editor modal left panel

[sabernhardt]

@afercia Good catch with checking the DOM and including additional elements. Perhaps we could add one more set of changes for the left panel in the image editor modal:
.media-modal .imgedit-wrap .imgedit-panel-content::after

[afercia]

48378.3.diff​:

• simplifies the alternate CSS method where it makes sense, by using just a bottom margin
• adds some bottom spacing to the image editor left panel as well
• removes a couple leftovers from [40428]
• fixes an annoying visual glitch, where the media modal content is visible behind the bottom toolbar border (see attached screenshots)

[afercia]

In 47266:

Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers.

Implementation of bottom padding in overflow content differs across browsers. See ​https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method.

• uses a CSS after pseudo element or simply a bottom margin to reserve some bottom spacing
• removes a couple leftovers from [40428]
• fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border

Props sabernhardt, afercia.
See #40152.
Fixes #48378.