Plugin search box lacks margin

[jilani53]

The UI appears fine with the default theme or when WooCommerce is inactive, as there’s no additional menu item under “Search Plugins.” However, when WooCommerce is activated, it adds a new menu item called “WooCommerce Marketplace.” After activation, the plugin search interface looks cluttered and less professional.

​https://prnt.sc/w5wj3PTzhfar

[jilani53]

Issue screenshot

[jilani53]

Hello,

I accidentally uploaded a sensitive file as an attachment:

https://core.trac.wordpress.org/attachment/ticket/64143/search-plugin.png

Could a Trac moderator please remove this file as soon as possible for security reasons?

Additionally, please update the ticket description to replace the screenshot with this one instead:
​https://prnt.sc/w5wj3PTzhfar

Thank you very much for your help!

[jorbin]

Hi @jilani53, welcome to WordPress core Trac. This trac is used for the development of the WordPress software, not for assistance with individual sites or plugins.

As the issue you are experiencing is caused by the WooCommerce plugin, I would suggest reaching out to the ​WooCommerce Support Forums for assistance.

I've closed this ticket of with the term invalid, in this case it's the unfriendly term trac uses to indicate that I've referred you to somewhere where you can hopefully find people better able to assist you.

[sabernhardt]

Add Plugin screen at 1150 pixels wide, with search box below six filter links (including Search Results and Beta Testing)

[sabernhardt]

French plugin search results, without Beta Testing link, at 1324 pixels wide

[sabernhardt]

#61785 made an adjustment, but the search box still can wrap under the filter links on screens wider than 1138px.

With the Search Results and Beta Testing links, the search box drops beneath the links for me, without the top and bottom margin, at 1212 pixels wide in English.

In French, the search form dropped at 1324px when I had Search Results, without the additional link for Beta Testing.

[jilani53]

Fix plugin search form

[jilani53]

Thanks for testing and the feedback!

I think we don't need an extra media screen for this.
We can solve the wrapping issue by adding a global margin to the ".wp-filter .search-form" class, as shown in my attached patch 64143.diff.

Here is the result after updating the CSS.

​https://prnt.sc/cnAIDaIRvm1t

[jilani53]

Hi @jorbin, just to clarify:

This ticket and the attached patch are related to WordPress core admin CSS (src/wp-admin/css/common.css) and not any plugin.

The patch fixes the wrapping issue of the search box in the admin list tables by adding a global margin to the ".wp-filter .search-form" CSS class.

This change only affects WordPress core styles and does not depend on WooCommerce or any other plugin.

Here is the "Plugin search box lacks margin" issue's solution - ​https://prnt.sc/cnAIDaIRvm1t

[nikunj8866]

@jilani53 Please update the CSS as follows:

.wp-filter .search-form {
    margin: 10px 0px;
}

The current:

.wp-filter .search-form {
    margin: 10px;
}

creates unnecessary spacing on the left and right sides.

@jilani53 If it is possible for you to apply your latest patch to a new pull request to our GitHub mirror, that will help in making the review process smoother. You can find the instructions here: ​https://make.wordpress.org/core/handbook/contribute/git/github-pull-requests-for-code-review/.

[jilani53]

@nikunj8866 For your kind attention - after applying your updated code, the alignment doesn’t look quite right.
Here’s a screenshot for reference: ​https://prnt.sc/06X4EEMyxYfb

I think adding a 10px margin on all sides would help keep the alignment and spacing looking right.

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

[sabernhardt]

1. The .wp-filter .search-form selector also applies on the Media Library screen, and it should not have the extra margin in List mode.
2. A left margin can help when the search form is below the filter links, but the form does not need a right margin when it displays to the right of the filters.

An additional ruleset can be more specific, placed before .wp-filter .search-form.search-plugins select:

.wp-filter .search-form.search-plugins {
	margin: 11px 0 11px 10px;
}

[jilani53]

We should also add a right margin to maintain proper right alignment — ​https://prnt.sc/hcw-CAs_m-7M

This overall adjustment eliminates the need for additional media queries.