Media toolbar spacing inconsistent across views

[desrosj]

The media toolbar is present on both list and grid views. The padding on the dropdowns and buttons, though, is inconsistent.

[desrosj]

Note the scrunched dropdowns/buttons

[desrosj]

Note the nicely spaced dropdowns and buttons

[seusmaniqbal]

Set margin for Media toolbar dropdowns

[ianbelanger]

SVN version of changes

[ianbelanger]

Tested patch on Lenovo ThinkPad Windows 10, in Firefox 59.0.2 and Chrome 66.0.3359.139. Changes looked good in both browsers. Also uploaded svn version of patch.

[subrataemfluence]

I applied the patch and it looks much better.

However, in order to keep the spacing consistent with media grid view the margin I believe needs to be 6px instead of 8px.

.post-type-attachment .wp-filter select {
    margin-right: 6px;
}

[ianbelanger]

Refreshed patch and tested with current trunk

[sabernhardt]

6px right margin and 0 margin for other sides of select elements in List View filter bar

[sabernhardt]

The view-switch container ​adds 4 pixels to the right margin in Grid mode to account for the lack of whitespace between elements. The select elements have a 10-pixel right margin in Grid mode, so a 6-pixel margin plus the space would be consistent with that. I also set the other sides to zero margin in List mode to remove the 1-pixel left margin.

If you test within the 783-900 pixel range, the select elements have a larger font size and padding in Grid mode, but that does not relate to the spacing.

[pooja1210]

Hi,

Patch report for -https://core.trac.wordpress.org/attachment/ticket/43904/43904.5.diff

Environment:
WordPress: v6.2.2
OS: Mac
Browser: Chrome

Expected Result: Media toolbar spacing should be consistent for both list and grid ☑️

Screenshots:
Before: ​https://prnt.sc/lcjlIKIDZl3F

After: ​https://prnt.sc/kHbcer79x_6u

Thanks!

[sumitbagthariya16]

QA Update ✅

Patch report for -https://core.trac.wordpress.org/attachment/ticket/43904/43904.5.diff

Environment:
WordPress: v6.4.2
PHP: 8.0.21
Web Server: Nginx 1.20.2
Browser: Chrome
OS: macOS Ventura 13.3

Screenshots:
​https://prnt.sc/bFCWzq5ICcFP

[shailu25]

Test Report:

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/43904/43904.5.diff

Environment:

WordPress: 6.3.2
OS: Windows
Browser: Firefox
Active Plugin - None
PHP - 8.1.2

Expected Result:

• Media toolbar spacing should be consistent for both list and grid view.

Actual Result:

• After Applying Patch Media toolbar's spacing are consistent for both list and grid view. ✅

Screenshots:

Before Patch: ​https://prnt.sc/RLQhelrn_NzQ
After Patch: ​https://prnt.sc/MFTATkJnynzc

[devmuhib]

Patch report for -https://core.trac.wordpress.org/attachment/ticket/43904/43904.5.diff
Environment:
WordPress: 6.4
OS: Windows
Browser: Chrome
Expected Result: Media toolbar spacing should be consistent for both list and grid ✅
Screenshots:
Before: ​https://i.imgur.com/V2khzuf.jpg
After: ​https://i.imgur.com/RSzmOvg.jpg

[huzaifaalmesbah]

Test Report

Patch tested: 43904.5.diff​

Environment

• WordPress: 6.5-beta1-57630-src
• PHP: 8.2.15
• Server: nginx/1.25.3
• Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
• Browser: Chrome 121.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.0
• MU Plugins: None activated
• Plugins:
  • Gutenberg 17.7.0
  • Test Reports 1.1.0

Actual Results

Issue resolved with patch and now both list and grid spacing same ✅

Screenshots

Before Apply Patch	After Apply Patch ✅

[audrasjb]

I also tested this patch successfully on my side.
@antpb is it still on you plate? RC1 is scheduled tomorrow, so just wanted to ensure it is committed it before the release :)

[antpb]

In 57764:

Media: Use consistent spacing for the media toolbar in both grid and list view.

Previously, the spacing between media toolbar elements in grid and list view did not match. We now use the same select margin across both views.

Props desrosj, seusmaniqbal, ianbelanger, subrataemfluence, sabernhardt, pooja1210, sumitbagthariya16, shailu25, devmuhib, huzaifaalmesbah, audrasjb.
Fixes #43904.