Theme browser overflows horizontally in mobile layout

[wildworks]

• 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.

[wildworks]

Screenshot showing right margin of the image causing overflow

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.

[sainathpoojary]

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.

[dhruvang21]

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.

[sabernhardt]

I could reproduce the extra scrollbar in Chrome but not in Firefox.

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

[yogeshbhutkar]

#62607 was marked as a duplicate.

[parthvataliya]

#62647 was marked as a duplicate.

[audrasjb]

Thanks for the PR. I can confirm the patch fixes the issue on Chrome and doesn't introduce any issues on other browsers like Firefox or Safari.

Self-assigning for commit.

[audrasjb]

In 59553:

Themes: Fix unwanted horizontal scrolling in theme details screen on mobile.

This changeset fixes an issue where the theme browser created unwanted horizontal scrolling on some mobile devices. The issue occured when viewing theme details on mobile.

Follow-up to [26142].

Props wildworks, abcd95, sainathpoojary, dhruvang21, sabernhardt.
Fixes #62411.