Uneven Horizontal Spacing in WordPress Admin .wrap Container

[vijaysinh9094]

There is already 20px padding on the right side, and an additional 2px margin is being applied, making the total spacing 22px. To maintain equal spacing of 20px on both sides so that is better for user perspective.

[kananiparth1326]

As per the issue, I have removed the 2px left margin. Now, there is 20px spacing on both sides.

[sabernhardt]

@dvpatel also set the left margin to zero—but ​without the unit—in ​PR 8822.

However, adding the 2 pixels on .wrap seems intentional. [26072] imported MP6, which changed the .wrap spacing
margin: 4px 15px 0 0;
to
margin: 10px 20px 0 2px;

On the other hand, #wpfooter has padding of 20 pixels on both sides.

Related: #63305 (on smaller screens, the opposite side has 2 more pixels of spacing)

[sabernhardt]

#63464 was marked as a duplicate.

[SirLouen]

This report has to be sorted at the same time as #63305
Both are focusing on a problem with identical characteristics, for the two versions (long width and short width versions)

I've sent a patch in #63305 aiming to sorting both in one shot as it should.

For these reasons, I'm marking this as duplicate.

[sandeepdahiya]

Firstly, I would recommend you to ​checkout this image to understand the issue better for #63305 and #63306. Both tickets relate to the same kind of bugs, with the only difference of screen-sizes.

Bug Reproduction and Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: ​Patch-8938.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Firefox 139.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Bug Reproduction

1. Before the patch, on Desktop view in Settings -> General section, we have #wpcontent with left-padding: 20px while .wrap with left-margin: 2px and right-margin: 20px. That makes a difference of 2 px in overall position. ​#wpcontent screenshot before the patch and ​.wrap screenshot before the patch

2. Also, before the patch, on Desktop view in Settings -> General section, we have #screen-meta and #screen-meta-links with right margin of 20px. ​#screen-meta before the patch and ​#screen-meta-links before the patch

Actual Patch Results

1. After the patch, on Desktop view in Settings -> General section, we have #wpcontent{padding-left: 20px, padding-right: 20px} and .wrap with 0 margin and 0 padding. ✅ Above patch resolves the issue. ​#wpcontent screenshot after the patch and ​.wrap screenshot after the patch

2. After the patch, on Desktop view in Settings -> General section, we have #screen-meta and #screen-meta-links with 0 margin and 0 padding. ✅ Above patch resolves the issue. ​#screen-meta after the patch and ​#screen-meta-links after the patch

Additional Notes

• This same patch resolves bugs mentioned in #63305.

Supplemental Artifacts

• I have submitted a separate test report in #63305 to avoid any confusion.

[SirLouen]

@sandeepdahiya can you integrate this report editing the one you posted in #63305 to have full context there?

[sandeepdahiya]

Replying to SirLouen:

@sandeepdahiya can you integrate this report editing the one you posted in #63305 to have full context there?

I have already submitted the test report here as well. ​This image explains everything at one place and I have mentioned all the screenshots below to have a look at.

For Desktop view (Before Patch):
​#wpcontent
​.wrap
​#screen-meta
​#screen-meta-links

For Desktop view (After Patch):
​#wpcontent
​.wrap
​#screen-meta
​#screen-meta-links

For Mobile view (Before Patch):
​#wpcontent and .wrap
​#screen-meta and #screen-meta-links

For Mobile view (After Patch):
​#wpcontent and .wrap
​#screen-meta and #screen-meta-links

Also the ​Patch-8938.diff works fine for #63305 and #63306.