Make WordPress Core

Opened 11 months ago

Closed 9 months ago

Last modified 6 months ago

#63305 closed defect (bug) (maybelater)

On mobile devices, the left and right spacing is not equal for administration pages

Reported by: deeppatel8950's profile deeppatel8950 Owned by:
Milestone: Priority: normal
Severity: trivial Version: 3.8
Component: Administration Keywords: has-test-info has-patch has-screenshots dev-feedback
Focuses: ui, css Cc:

Description

On mobile devices, the left and right padding or margin in the General Settings section of the dashboard are not equal, which doesn't look good from the user's perspective.

Attachments (3)

Screenshot 2025-04-18 at 12.02.42 PM.png (292.5 KB) - added by deeppatel8950 11 months ago.
Screenshot 2025-04-18 at 12.02.08 PM.png (313.0 KB) - added by deeppatel8950 11 months ago.
63305.diff (302 bytes) - added by dharmik1455 11 months ago.
I have changed the margin right 12px to 10px.

Download all attachments as: .zip

Change History (17)

@dharmik1455
11 months ago

I have changed the margin right 12px to 10px.

#1 @dilipbheda
11 months ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63305/63305.diff

Environment

  • WordPress: 6.8
  • PHP: 8.3.20
  • Server: Apache/2.4.41 (Ubuntu)
  • Database: mysqli (Server: 5.7.39 / Client: mysqlnd 8.3.20)
  • Browser: Chrome 135.0.0.0
  • OS: Linux
  • Theme: Neve 4.0.1
  • MU Plugins:
    • Code Test 1.0
    • Disabled updates 1.0
  • Plugins:
    • Elementor 3.28.3
    • Feedzy RSS Feeds Lite 5.0.3
    • Feedzy RSS Feeds Premium 3.0.1
    • Revive Social 9.2.3
    • Revive Social Pro Add-on 3.2.2
    • Test Reports 1.2.0
    • WooCommerce 9.8.1

Actual Results

  1. ✅ Issue resolved with patch.

This ticket was mentioned in Slack in #design by deep_patel. View the logs.


11 months ago

#3 @SirLouen
10 months ago

  • Keywords needs-design has-test-info dev-feedback added

#4 @SirLouen
10 months ago

  • Keywords needs-design-feedback added; needs-design removed

#5 follow-up: @sabernhardt
9 months ago

  • Component changed from General to Administration
  • Keywords has-patch added
  • Severity changed from normal to trivial
  • Summary changed from On mobile devices, the left and right padding or margin in the General Settings section of the dashboard are not equal, which doesn't look good from the user's perspective. to On mobile devices, the left and right spacing is not equal for administration pages
  • Version changed from 6.8 to 3.8

[26382] specifically changed the right margin from 10 to 12 pixels.

Related: #63306 (on larger screens, the left side has the extra 2 pixels instead of the right)

#7 in reply to: ↑ 5 @SirLouen
9 months ago

  • Keywords needs-testing added; dev-feedback needs-design-feedback removed

Replying to sabernhardt:

[26382] specifically changed the right margin from 10 to 12 pixels.

Related: #63306 (on larger screens, the left side has the extra 2 pixels instead of the right)

Have you seen the ticket referenced there (#26169) It feels very random, 0 context of why he decided to set back that element to 12px.

Moreover, I wonder how these reporters batch spot and report these 2px errors...

I have submitted this new patch. For me that padding 10 to one side, margin 10 on the other side, adding 2 px there, 2 px here, everything simply feels very inconsistent.

I'm not an expert at CSS, but isn't more consistent to just stick to one or another overall?

#8 follow-up: @sandeepdahiya
9 months ago

  • Keywords has-screenshots dev-feedback added; needs-testing removed

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 Mobile view in Settings -> General section, we have #wpcontent with left-padding: 10px while .wrap with right-margin: 12px. That makes a difference of 2 px in overall position. Screenshot before the patch
  1. Also, before the patch, on Mobile view in Settings -> General section, we have #screen-meta and #screen-meta-links with right margin of 10px. Screenshot before the patch

Actual Patch Results

  1. After the patch, on Mobile view in Settings -> General section, we have #wpcontent{padding-left: 10px, padding-right: 10px} and .wrap with 0 margin and 0 padding. ✅ Above patch resolves the issue. Screenshot after the patch
  1. After the patch, on Mobile view in Settings -> General section, we have #screen-meta and #screen-meta-links with 0 margin and 0 padding. ✅ Above patch resolves the issue. Screenshot after the patch

Additional Notes

  • This same patch resolves bugs mentioned in #63306.

Supplemental Artifacts

  • I have submitted a separate test report in #63306 to avoid any confusion.
Last edited 9 months ago by sandeepdahiya (previous) (diff)

#9 in reply to: ↑ 8 @SirLouen
9 months ago

Replying to sandeepdahiya:

Supplemental Artifacts

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

I think we should merge both tickets into this one. They are the same topic, and they should be sorted at the same time.

Simply adding props to @vijaysinh9094 and @kananiparth1326 for the submitted patch and good to go

#10 @SirLouen
9 months ago

#63306 was marked as a duplicate.

This ticket was mentioned in Slack in #core by sirlouen. View the logs.


9 months ago

#12 @SirLouen
9 months ago

  • Resolution set to maybelater
  • Status changed from new to closed

As per today's bug-scrub it has been considered that this change poses more risks than advantages specially for extenders that could have considered for both this version and #63306 a margin of two extra pixels and this may provoke misalignments in their respective extensions

Allegedly, I want to inform that there is an admin revamp under consideration, and it may come in 6.9 or 7.0.

For these, reasons, this ticket will be closed as maybelater.

Thanks to everyone who has participated in this report.

#13 @sabernhardt
9 months ago

  • Milestone Awaiting Review deleted

#14 @dilip2615
6 months ago

Test Report

Description

Validate that the patch reduces the right margin on the admin wrapper from 12px to 10px.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63305/63305.diff

Environment

  • WordPress: 6.8.2
  • PHP: 8.2.23
  • Server: nginx/1.26.1
  • Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.23)
  • Browser: Chrome 140.0.0.0
  • OS: Windows 10/11
  • Theme: Twenty Twenty-One 2.5
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Steps

1) Fresh trunk:

  • git fetch origin && git reset --hard origin/trunk
  • npm ci && composer install

2) Applied patch:

  • Downloaded: 63305.diff
  • Applied: git apply --index 63305.diff

3) Restarted env: npx wp-env start --update
4) Verified in WP Admin (e.g., Dashboard → Home):

  • Inspected <div class="wrap">…</div> with DevTools.
  • Checked Computed/Styles for .wrap.

Actual Results

  • Before (trunk): .wrap { margin-right: 12px; }
  • After (patched): .wrap { margin-right: 10px; }
  • Visual spacing looks correct; no regressions observed on common admin screens.

Screenshots

Conclusion

✅ Patch works as expected on my setup.

Last edited 6 months ago by dilip2615 (previous) (diff)
Note: See TracTickets for help on using tickets.