From c68c716f75ab1617ed000b5608e925c8c85e32aa Mon Sep 17 00:00:00 2001
From: Anton Strogonoff <anton@strogonoff.name>
Date: Wed, 3 Jan 2024 18:52:19 +0800
Subject: [PATCH] Fix site navigation being somewhat jumbled at certain
 viewport widths (#6022)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**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 | 33 ++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/docusaurus/src/css/custom.css b/packages/docusaurus/src/css/custom.css
index dea3955ad191..cc3848670762 100644
--- a/packages/docusaurus/src/css/custom.css
+++ b/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);
 }