Excessive Spacing Between Right Sidebar Items in Edit Media Screen on Mobile View

[mikinc860]

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.

[dhrumilk]

We need to remove this CSS to resolve the padding issue.

Trac Ticket:

Core-63571

## Description

This PR addresses a UI issue in the WordPress admin area on the Edit Media screen (/wp-admin/post.php?post=<id>&action=edit), where the right-hand sidebar (.misc-pub-section) exhibits excessive and uneven vertical spacing between metadata items when viewed on smaller screen widths.

## Problem

• On mobile devices or narrow screens, .misc-pub-section items have a 20px vertical padding.

.misc-pub-section {
    padding: 20px 10px;
}

## Solution

• Reduced vertical padding for .misc-pub-section from 20px to 10px on mobile screen widths.

.misc-pub-section {
    padding: 10px 10px;
}

This aligns the vertical spacing with mobile UI best practices and ensures a more compact, user-friendly display on smaller screens.

[sabernhardt]

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

[sabernhardt]

The .misc-pub-section class is also used for items in the Classic Editor's Publish metabox.

[sabernhardt]

PR 8990 was updated to use 15px 10px.

[joedolson]

The statement "touch targets smaller than 24 pixels must be at least 24 pixels away from other targets" is not accurate. The correct description is that a 24 pixel diameter circle centered on the click target must not intersect any other 24 pixel diameter circle centered on a different click target.

So this spacing is definitely larger than required for accessibility reasons. The height of the text is an inclusive part of the total click target measurement. The link text height by default is 17px here, (13px text and 1.4 ratio line height), so we really only need padding of about 4px to meet the strict guidelines. To meet the AAA guidelines for spacing, we'd need 14px padding.

In reality, however, these controls are embedded in lines of texts, and are exempted from both rules for that reason.

In my opinion, padding: 12px 10px; would be adequate.

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

[hbhalodia]

Hi Team, Since there is no any activity on the PR - ​https://github.com/WordPress/wordpress-develop/pull/8990, to update it with latest feedback, I have opened a new PR (Since I do not have liberty to push in that PR), so that we can close this ticket and we are align to add it to WP 6.9.

New updated PR - ​https://github.com/WordPress/wordpress-develop/pull/9335, I would be happy to close my PR, if the previous PR is updated by anyone.

Thank You,

[joedolson]

Looking at the publish metabox, I think this change in spacing is less important there, but still helpful.

We'll need to get a screenshot for the publish metabox as well, but otherwise I think this is ready for commit.

[hbhalodia]

Replying to joedolson:

Looking at the publish metabox, I think this change in spacing is less important there, but still helpful.

We'll need to get a screenshot for the publish metabox as well, but otherwise I think this is ready for commit.

I guess @sabernhardt, Have added the screenshot in the comment - ​https://github.com/WordPress/wordpress-develop/pull/9335#pullrequestreview-3091014139

[joedolson]

Comments meta box .misc-pub-sections

Also adding the comment editing box, which is also impacted.

[joedolson]

In 60619:

Administration: Reduce mobile item spacing in .misc-pub-section.

On small viewports, the total vertical padding of .misc-pub-section was adjusted from 14px to 40px.

This significant different made for difficult reading of information in the Post Publish metabox, the Media details meta box, and the comment editing metabox.

Shift the total vertical padding to 24px to improve the readability of metaboxes on mobile.

Props mikinc860, dhrumilk, debarghyabanerjee, mukesh27, hbhalodia, sabernhardt, joedolson.
Fixes #63571.