Search bar behavior on v5 documentation page

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

with key word documentation Search bar , documentation font size in open questions.

Current Behavior 😯

Firstly, congrats on rolling out v5. It’s super nice. However, the new website seems to have an oversized font (I checked my chrome zoom level is at 100%):

• The SeachBar looks ugly for being so crowded.
• When seach for “Typography” the word wrap is not correct.
  
• Plus it collides with the hotkey tips

I think it is also related to #28395.

Expected Behavior 🤔

Have a smaller font size in documentation header.

• Or (maybe And), enlarge the seach bar and the drop down accrodingly.

Steps to Reproduce 🕹

Steps:

1. Go to https://mui.com/ and make sure its on v5. (date of report 2021-09sept-07)
2. Open the seach bar (or with ctrl/cmd+k
3. Seach for typography

Context 🔦

Nothing. Just think the documentation website should be more carefully designed.

Your Environment 🌎

• Windows 1902
• Chrome 91

[hbjORbj]

Show less irrelevant chapters

I think what if we swap the text to be something like this?

@siriwatknp Since we have indentation with a hashtag for a chapter, I think swapping the two names won’t be a problem. 👍

[PabloLION]

I think the new way of search needs some improvement. When I searched for “Button” the “Toggle Button” comes first. If I encountered a third misbehavior on UX, I will create a new thread of this issue to make it clearer. Thanks for the quick & good job of fixing it!