[wp-trac] [WordPress Trac] #63571: Excessive Spacing Between Right Sidebar Items in Edit Media Screen on Mobile View

[WordPress Trac]

#63571: Excessive Spacing Between Right Sidebar Items in Edit Media Screen on
Mobile View
--------------------------+-------------------------------------
 Reporter:  mikinc860     |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Media         |     Version:  3.8
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  ui, accessibility, css
--------------------------+-------------------------------------
Changes (by sabernhardt):

 * version:   => 3.8


Old description:

> On the Edit Media screen (/wp-admin/post.php?post=<id>&action=edit) in
> the WordPress admin area, the right-hand sidebar (containing file
> metadata like upload date, file URL, dimensions, etc.) exhibits uneven
> and excessive vertical spacing between items when viewed on mobile
> devices.
>
> This is not visible on desktop but becomes evident on smaller screen
> widths. The spacing between elements like "Uploaded on", "Uploaded by",
> "File URL", and "Download file" becomes disproportionate, affecting
> usability and visual coherence.
>
> **Steps to Reproduce:**
>
> 1. Go to Media > Library in the WordPress admin dashboard.
> 2. Click on any image to open the "Edit Media" screen.
> 3. Inspect the right sidebar on a mobile device or using browser
> responsive tools.
> 4. Observe the excessive spacing between the elements inside the Save
> meta box.
>
> **Expected Behavior:**
> All items in the sidebar should be evenly spaced and visually compact for
> optimal display on small screens.
>
> **Actual Behavior:**
> There is excessive and inconsistent vertical spacing between items,
> making the layout look broken or poorly styled.

New description:

 On the Edit Media screen (`/wp-admin/post.php?post=<id>&action=edit`) in
 the WordPress admin area, the right-hand sidebar (containing file metadata
 like upload date, file URL, dimensions, etc.) exhibits uneven and
 excessive vertical spacing between items when viewed on mobile devices.

 This is not visible on desktop but becomes evident on smaller screen
 widths. The spacing between elements like "Uploaded on", "Uploaded by",
 "File URL", and "Download file" becomes disproportionate, affecting
 usability and visual coherence.

 **Steps to Reproduce:**

 1. Go to Media > Library in the WordPress admin dashboard.
 2. Click on any image to open the "Edit Media" screen.
 3. Inspect the right sidebar on a mobile device or using browser
 responsive tools.
 4. Observe the excessive spacing between the elements inside the Save meta
 box.

 **Expected Behavior:**
 All items in the sidebar should be evenly spaced and visually compact for
 optimal display on small screens.

 **Actual Behavior:**
 There is excessive and inconsistent vertical spacing between items, making
 the layout look broken or poorly styled.

--

Comment:

 [26134] intentionally set the padding to 20 pixels on the top and bottom
 so the links in that section would have adequate spacing for touchscreen
 interactivity.

 40 pixels between each line seems high when the font size is still only
 `13px`, but touch targets smaller than 24 pixels must be **at least 24**
 pixels away from other targets to meet
 [https://dequeuniversity.com/rules/axe/4.6/target-size WCAG Success
 Criterion 2.5.8]. The minimum would be `padding: 12px 10px`, and I would
 prefer not to reduce it to less than `padding: 15px 10px` after eleven
 years at the higher value (if at all).

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63571#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform