WordPress.org
Get WordPress

Make WordPress Core

Opened 4 weeks ago

Last modified 9 days ago

#62411 new defect (bug)

Theme browser overflows horizontally in mobile layout

Reported by: wildworks's profile wildworks Owned by:
Milestone: 6.8 Priority: normal
Severity: normal Version: 3.8
Component: Themes Keywords: has-patch
Focuses: css, administration Cc:

Description

  • In the mobile layout, go to Apperance > Themes.
  • Select one of the themes.
  • It seems that the right margin of the screenshot image is the cause.

Attachments (2)

theme-browser-overflow.png​ (176.5 KB) - added by wildworks 4 weeks ago.
Screenshot showing right margin of the image causing overflow
fix-62411.mp4​ (5.4 MB) - added by dhruvang21 4 weeks ago.

Change History (10)

@wildworks
4 weeks ago

Screenshot showing right margin of the image causing overflow

This ticket was mentioned in ​PR #7791 on ​WordPress/wordpress-develop by ​@abcd95.
4 weeks ago #1

  • Keywords has-patch added

Trac ticket: Core - 62411

This PR fixes a UI issue where the theme browser creates unwanted horizontal scrolling on mobile devices. The issue occurs specifically when viewing theme details in the mobile layout.

This ticket was mentioned in ​Slack in #core-test by oglekler. ​View the logs.
4 weeks ago

#3 @sainathpoojary
4 weeks ago

  • Component changed from General to Themes
  • Keywords needs-testing added

#4 @sainathpoojary
4 weeks ago

  • Keywords needs-testing removed

Test Report

Description

This report verifies that applying margin: 0 effectively resolves the issue with the extra right margin and horizontal overflow on images in mobile view.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7791

Environment

  • WordPress: 6.7
  • PHP: 8.1.29
  • Server: nginx/1.16.0
  • Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
  • Browser: Chrome 130.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Four 1.2
  • MU Plugins: None activated
  • Plugins: Test Reports 1.2.0

Actual Results

  1. ✅ After applying the patch, the extra right margin on the image is removed, and horizontal overflow is no longer visible in mobile view.

#5 @dhruvang21
4 weeks ago

Test Report

Description

This report validates that the patch for resolving the issue "Theme browser overflows horizontally in mobile layout" works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/7791.diff

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.22
  • Server: nginx/1.27.0
  • Database: mysqli (Server: 8.0.39 / Client: mysqlnd 8.2.22)
  • Browser: Chrome 128.0.0.0
  • OS: Linux
  • Theme: Twenty Twenty-Five 1.0
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.1.0

Actual Results

  1. ✅ Issue resolved with patch.

@dhruvang21
4 weeks ago

#6 @sabernhardt
4 weeks ago

  • Focuses css administration added
  • Milestone changed from Awaiting Review to 6.8
  • Version set to 3.8

I could reproduce the extra scrollbar (before patch) in Chrome but not in Firefox.

Earliest version: the 100% width plus 30px right margin goes back to WordPress 3.8 with [26142].

Last edited 2 weeks ago by sabernhardt (previous) (diff)

#7 @yogeshbhutkar
2 weeks ago

#62607 was marked as a duplicate.

#8 @parthvataliya
9 days ago

#62647 was marked as a duplicate.

Note: See TracTickets for help on using tickets.