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.