'Replace image' dialog CSS issues (mobile)

[sabernhardt]

Follow-up to #53833

When testing a patch for that ticket, @hareesh-pillai noticed the first two problems below at smaller screen sizes.

1) The top of the image focus outline and checkbox are cut off between 640 and 782 pixels. (Changeset r51642 added top padding for 640px and narrower, or under 400px tall and any width, but changing top from 72px to 82px at a larger breakpoint might have been better.) This also happens when adding a new image.
2) The Date filter can drop below the Type filter—out of sight—due to the auto width introduced in r44653. With "November 2021" as the longest option, this occurs for me at about 320-480px and 640-800px. Other languages can break in wider viewports, different fonts, etc.
3) At any width, the heading style is all uppercase for the inline uploader in the Replace image dialog but not when adding a new image. Changes to the h2 headings in r35427 and r46375 were made (mainly) for the first screen of the "Image details" modal, but "Replace image" is still inside that modal.

Steps to reproduce:

1. Install and activate the Classic Editor plugin.
2. Create a new post.
3. Click "Add Media" button. At various screen sizes, note whether the Date filter shows and whether the selected image has a full focus outline on the Media Library tab. Also check the styles on the Upload files tab.
4. Select an image and insert it into the post.
5. Click on the image and select the Edit button (pencil icon). Again, note whether the Date filter shows and whether the selected image has a full focus outline on the Media Library tab. Also check the styles on the Upload files tab.

[sabernhardt]

Replace image dialog in 5.8.1, with focus outline clipped and hidden Date filter (after selecting filter and showing all images again)

[sabernhardt]

Add New image, with focus outline clipped and hidden Date filter

[sabernhardt]

Inline uploader when no images are found with filter

[sabernhardt]

Inline uploader for uploading a new image replacement

[sabernhardt]

iteration on 53833.more.patch, moving the height and top values from 782px to 900px breakpoint

[sabernhardt]

Patch notes:

1. The patch adjusts the top value for the media grid and removes that top padding to avoid clipping the focus outline. Also, the 82px height and top values move from the 782px breakpoint to 900px, where the filter selects and search box increase in font size and height.
2. The Date filter select's auto width is removed so the two can stay side-by-side. The dropdown still can be too wide in the block editor, when setting a Featured Image or using the Classic block. (Changing the selector to :first-of-type:last-of-type might work in the Gutenberg stylesheet.)
3. For the heading style, the patch has .image-details .media-embed h2, which was not considered safe with the minor release. However, using two :not() selectors is too specific and would change the margin in places:
   .image-details h2:not(.media-attachments-filter-heading):not(.upload-instructions)

[alvitazwar052]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/54395/54395.patch

Environment

• OS: macOS 12.4
• Web Server: Nginx
• PHP: 7.4.33
• WordPress: 6.3-alpha-55505-src
• Browser: Chrome
• Theme: Twenty Twenty-two, Twenty-nineteen

Steps I followed

1. Pulled the Patch using grunt
2. Install and Activate the Classic Editor plugin.
3. Click the "Add Media" button. At various screen sizes, Checked Media Icons and Date filters
4. Insert the Image from the media library and check the focus indicators
5. Checked the Uploader tabs

Screenshots:

1. Empty Upload Tab: ​https://prnt.sc/Yiu8hctu4ACk
2. Media Library Focus: ​https://prnt.sc/maapK_euAbTg
3. Empty Media Library: ​https://prnt.sc/qJbs__mLbJ9W

Actual Results

• The patch is working as expected.✅

[joedolson]

Refreshed patch

CSS fixes for classic media replace dialog

Trac ticket: https://core.trac.wordpress.org/ticket/54395

[joedolson]

In 55896:

Media: Fix CSS layout issues in Replace media dialog.

Make focus outline fully visible at all media query breakpoints, prevent the date filter from becoming hidden, and match the heading styles to other screens.

Props sabernhardt, hareesh-pillai, alvitazwar052.
Fixes #54395.

Fixed in https://core.trac.wordpress.org/changeset/55896