[wp-trac] [WordPress Trac] #54395: 'Replace image' dialog CSS issues (mobile)

[WordPress Trac]

#54395: 'Replace image' dialog CSS issues (mobile)
--------------------------+-----------------------------
 Reporter:  sabernhardt   |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:
 Severity:  normal        |   Keywords:
  Focuses:  css           |
--------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54395>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform