WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 2 months ago

#54395 new defect (bug)

'Replace image' dialog CSS issues (mobile)

Reported by: sabernhardt Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch has-screenshots
Focuses: css Cc:

Description

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.

Attachments (5)

focus-outline-clipped-all-images.png (167.6 KB) - added by sabernhardt 2 months ago.
Replace image dialog in 5.8.1, with focus outline clipped and hidden Date filter (after selecting filter and showing all images again)
add-new-image.png (151.8 KB) - added by sabernhardt 2 months ago.
Add New image, with focus outline clipped and hidden Date filter
inline-uploader-no-items-found.png (21.0 KB) - added by sabernhardt 2 months ago.
Inline uploader when no images are found with filter
inline-uploader-replace.png (18.8 KB) - added by sabernhardt 2 months ago.
Inline uploader for uploading a new image replacement
54395.patch (1.4 KB) - added by sabernhardt 2 months ago.
iteration on 53833.more.patch, moving the height and top values from 782px to 900px breakpoint

Download all attachments as: .zip

Change History (6)

@sabernhardt
2 months ago

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

@sabernhardt
2 months ago

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

@sabernhardt
2 months ago

Inline uploader when no images are found with filter

@sabernhardt
2 months ago

Inline uploader for uploading a new image replacement

@sabernhardt
2 months ago

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

#1 @sabernhardt
2 months ago

  • Keywords has-patch has-screenshots added

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)
Note: See TracTickets for help on using tickets.