Fix site navigation being somewhat jumbled at certain viewport widths (…

…#6022)

**What's the problem this PR addresses?**

Site navigation issues with bits of text overlapping each other and
becoming unreadable, as well as awkward typography.

Screenshot before the fix:

<img width="1238" alt="Screenshot 2023-12-14 at 19 50 27"
src="https://github.com/yarnpkg/berry/assets/292959/cabee9f9-8a70-4130-a1f5-d22327905e36">

**How did you fix it?**

- Allow horizontal scrolling of first top nav group
- Avoid awkward linebreaks
- Remove faux placeholder from search button that tries to act as a text
input

Screenshot after the fix (note that the scrollbar is hidden unless
scrolling is initiated or OS is set up to “always show” scrollbars):

<img width="1237" alt="Screenshot 2023-12-14 at 20 07 08"
src="https://github.com/yarnpkg/berry/assets/292959/89958f34-7a22-4327-84ca-1f519ba8b5c1">


**Checklist**
<!--- Don't worry if you miss something, chores are automatically
tested. -->
<!--- This checklist exists to help you remember doing the chores when
you submit a PR. -->
<!--- Put an `x` in all the boxes that apply. -->
- [x] I have read the [Contributing
Guide](https://yarnpkg.com/advanced/contributing).

<!-- See
https://yarnpkg.com/advanced/contributing#preparing-your-pr-to-be-released
for more details. -->
<!-- Check with `yarn version check` and fix with `yarn version check
-i` -->
- [x] I have set the packages that need to be released for my changes to
be effective.

<!-- The "Testing chores" workflow validates that your PR follows our
guidelines. -->
<!-- If it doesn't pass, click on it to see details as to what your PR
might be missing. -->
- [x] I will check that all automated PR checks pass before the PR gets
reviewed.

packages/docusaurus/src/css/custom.css

@@ -127,6 +127,39 @@ html.blog-wrapper .container {
   display: none;
 }
 
+.navbar__item {
+  /* Avoid awkward linebreaks of menu items.
+   * Labels should be kept short, however. */
+  white-space: nowrap;
+}
+
+.navbar__inner > .navbar__items:first-child {
+  /* Allow the first nav item group to scroll horizontally. */
+
+  /* Without this rule, rightmost items in first nav group
+   * would overlap leftmost items in second nav group,
+   * becoming completely unreadable. */
+
+  /* NOTE: Would NOT work as is if there is a drop-down menu. */
+  /* That’s why it’s only applied to the first nav item group:
+   * the second nav group has a dropdown, which would be cut off
+   * by this overflow rule. */
+
+  overflow-x: auto;
+}
+
+.DocSearch-Button-Placeholder {
+  /* Hide faux placeholder in the search trigger button
+   * while maintaining reasonable whitespace.
+   * This is subjective, but I believe placeholder doesn’t add
+   * useful information and makes the button visually
+   * appear as a text input field, which it is in fact not. */
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
 .navbar__logo {
   height: var(--ifm-navbar-height);
 }