#63305 closed defect (bug) (maybelater)
On mobile devices, the left and right spacing is not equal for administration pages
| Reported by: |
|
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)
Change History (17)
#1
@
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
- ✅ Issue resolved with patch.
This ticket was mentioned in Slack in #design by deep_patel. View the logs.
11 months ago
#5
follow-up:
↓ 7
@
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
This ticket was mentioned in PR #8938 on WordPress/wordpress-develop by @SirLouen.
9 months ago
#6
Trac ticket: https://core.trac.wordpress.org/ticket/63305
#7
in reply to:
↑ 5
@
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:
↓ 9
@
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
- 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
- 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
- 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
- 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.
#9
in reply to:
↑ 8
@
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
This ticket was mentioned in Slack in #core by sirlouen. View the logs.
9 months ago
#12
@
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.
#14
@
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/trunknpm 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
- Attached before/after DevTools captures showing
.wrapmargin-right = 12px → 10px. - https://prnt.sc/Hn29-YxIc1Ud
- https://prnt.sc/r_V-vGdAU1ON
- https://prnt.sc/Z0dj7Qx4Dc-d
Conclusion
✅ Patch works as expected on my setup.
I have changed the margin right 12px to 10px.