fix: adjust spacing for custom search properly

[lex111]

Motivation

Adjustment styles must be applied equally to all search blocks, not just from the Algolia one. Otherwise, the lack of proper styling in other custom search bars will lead to the following result:

https://nomicon.io/ as example

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Preview (no visual changes, it just adds search wrapper to all search bars)

Related PRs

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	485ace8
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6255de4ddbe5800008ac7e63
😎 Deploy Preview	https://deploy-preview-7164--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	63
🟢 Accessibility	100
🟠 Best practices	83
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7164--docusaurus-2.netlify.app/

[github-actions]

Size Change: +194 B (0%)

Total Size: 797 kB

Filename	Size	Change
website/build/assets/js/main.********.js	603 kB	+194 B (0%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	49.9 kB
website/build/assets/css/styles.********.css	106 kB
website/build/index.html	38.6 kB

_{compressed-size-action}

[Josh-Cena]

I think this won't work as soon as we use the type: "search" navbar item, right? Nvm, looked at it again, search items are respected as well, but the point below still stands

IMO the goal is to reduce coupling between navbar items and navbar layout instead of hardcoding more special items, because it's in our plan to make every navbar item configurable (see also #7154 for one such confusion)

What about unifying the padding/margin for every navbar item? We have a similar problem for the color mode toggle as well.

[lex111]

Since SeachBar implementation comes from third-party plugins, we need put it in wrapper to set proper spacing by analogy with other navbar items. I don't know any other way to achieve this without introducing extra component.

[Josh-Cena]

Oh, I see where you are coming from. Can this wrapper be made generic? e.g. a <NavbarItem> wrapper with a margin that wraps all kinds of links?

[lex111]

No, because the search bar requires extra wrapper, not only to adjust the spacing, but to proper positioning on mobiles (see styles.css file).

[slorber]

👍 looks like a useful extra wrapper

Agree we can still improve things more and having something like NavbarItemWrapper could be useful in the future, open to further improvements

[JPeer264]

I totally understand the extra wrapper und support it, but is there a way of adding extra styles on these modules? Adding an extra className property is not supported when having type: 'search'. The reason why I ask this is, because we had some extra styles on .dsla-search-wrapper and is breaking it a little as we have another wrapper on top of it.

[slorber]

that seems reasonable to me that we allow a className attribute like other navbar items

Do you want to send a PR ?

[JPeer264]

Sure I can add a PR there.

[slorber]

Relevant issue in case there's too much spacing after upgrading: #7536

@JPeer264 didn't you encounter this problem with docusaurus-search-local ?