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).