On mobile devices, the search bar in the WordPress admin "Pages" section has an unnecessary right margin, which negatively impacts the visual alignment and user experience.

[ronak44]

On mobile devices, the search bar in the WordPress admin "Pages" section has an unnecessary right margin, which negatively impacts the visual alignment and user experience.

[sourav08]

Hi @ronak44,​

I've created a patch that removes the unnecessary right margin from the search bar in the "Pages" section on mobile devices. This adjustment enhances visual alignment and improves the user experience.

[sabernhardt]

63310.diff removes all margins from multiple inputs at any screen size, but at least .tagsdiv .newtag still needs the right margin.

I would just add margin-right: 0; in the p.search-box input[name="s"] ​ruleset for smaller screens, where it sets the input width at 100%.

[dilipbheda]

Updated patch

[dilipbheda]

@ronak44 Thank you for the ticket. I was able to replicate the issue on my end as well. I've uploaded the updated patch based on @sabernhardt's suggestion.

[nikunj8866]

Test Report

This report validates that the indicated patch addresses the issue ✅.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63310/63310.2.patch

Environment

• OS: Windows 11
• Web Server: nginx/1.26.1
• PHP: 8.2.27
• WordPress: 6.8.1
• Browser: Chrome v136.0.
• Theme: Twenty Twenty-Five (twentytwentyfive)
• Active Plugins:

Actual Results

• ✅ Issue resolved with patch.

Supplemental Artifacts

Before

​https://prnt.sc/s7tswPNsvFSk

After

​https://prnt.sc/2ij4pHjVlaFG

[darshitrajyaguru97]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63310/63310.2.patch

Environment:

OS: Windows 10
PHP: 8.2.12
WordPress: 6.8.1
Browser: Chrome
Theme: Twenty Thirteen
Plugins: None activated

Actual Results:

✅ Before patch:
Screenshot: ​https://prnt.sc/Lqc0IUk3HFCl

✅ After patch:
Screenshot: ​https://prnt.sc/0XUaYek-cINm

✅ Patch working well as desired solution

[sabernhardt]

#63510 was marked as a duplicate.

[sabernhardt]

63510.patch is another option to consider (props @dhruvang21). The .search-box paragraphs use flex display with a column-gap, which could make the float and margin unnecessary on the .search-box input[name="s"] search fields (at any screen size).

[SirLouen]

63510.patch by @dhruvang21

[SirLouen]

Test Report

Description

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

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63310/63510.patch

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: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

1. Props to @dhruvang21

Replying to sabernhardt:

63510.patch is another option to consider (props @dhruvang21). The .search-box paragraphs use flex display with a column-gap, which could make the float and margin unnecessary on the .search-box input[name="s"] search fields (at any screen size).

2. Definitely this is the best solution, great spotting, almost random add [29218] with 0 back testing.

[rollybueno]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63310/63510.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.29
• Server: nginx/1.29.0
• Database: mysqli (Server: 8.4.6 / Client: mysqlnd 8.2.29)
• Browser: Chrome 139.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • Gutenberg 21.5.0
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• https://core.trac.wordpress.org/attachment/ticket/63310/63310.2.patch also works.

Supplemental Artifacts

Before:

After:

[shailu25]

Test Report

This Report Validates that the indicated patch addresses the issue ✅.

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/63310/63510.patch

Environment:

OS: Windows
Web Server: nginx
PHP: 8.2.27
WordPress: 6.8.2
Browser: Chrome
Theme: Twenty Twenty-Five
Active Plugins: None

Actual Results

• Issue Resolved with patch.✅

Supplemental Artifacts

• Attachment Added

[shailu25]

Before Patch

[shailu25]

After Patch

The existing patch fixes a small right margin adjust for posts, pages, and comments. There is a larger margin gap on plugins and themes, and this also covers those.

Trac ticket: https://core.trac.wordpress.org/ticket/63310

[joedolson]

In reviewing the patch, I observed that there is also a similar but more significant issue on the plugins/themes screens. It makes sense to me adjust these at the same time.

[joedolson]

Plugins - before

[joedolson]

Themes - before

[joedolson]

Plugins - after

[joedolson]

Themes - after

[joedolson]

In 60975:

General: Improve search input alignment on mobile.

Remove an end margin misalignment on the search input for posts, comments, themes, and plugins.

Props ronak44, sourav08, dilipbheda, SirLouen, nikunj8866, darshitrajyaguru97, rollybueno, shailu25, sabernhardt, joedolson.
Fixes #63310.