Repository: nodejs/nodejs.dev
Pull request #2665 (2022-08-22 15:13:19)

fix(search-bar): fixed search bar styling and made it exclusive to search-bar
<!--
Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/main/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) before opening a pull request.
-->

## Description

This PR fixes a regression introduced by the last commit of https://github.com/nodejs/nodejs.dev/pull/2654 that would misalign the search bar. This PR also corrects and ensures a fixed height for the navigation bar.

### Check List

<!--
ATTENTION
Please follow this check list to ensure that you've followed all items before opening this PR
-->

- [x] I have read the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) and made commit messages that follow the guideline.
- [x] I have run `npm run lint:js -- --fix` and/or `npm run lint:md -- --fix` for my JavaScript and/or Markdown changes.
  - This is important as most of the cases your code changes might not be correctly linted
- [x] I have run `npm run test` to check if all tests are passing, and/or `npm run test -- -u` to update snapshots if I created and/or updated React Components.
- [x] I have checked that the build works locally and that `npm run build` work fine.
- [x] I've covered new added functionality with unit tests if necessary.


codecov-commenter: # [Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/2665?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) Report
> Merging [#2665](https://codecov.io/gh/nodejs/nodejs.dev/pull/2665?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) (827c773) into [main](https://codecov.io/gh/nodejs/nodejs.dev/commit/8f2e95992450ba5cd64cddfd4c1b16b3bd219e87?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) (8f2e959) will **not change** coverage.
> The diff coverage is `100.00%`.

```diff
@@           Coverage Diff           @@
##             main    #2665   +/-   ##
=======================================
  Coverage   86.37%   86.37%           
=======================================
  Files         102      102           
  Lines        1064     1064           
  Branches      293      293           
=======================================
  Hits          919      919           
  Misses        139      139           
  Partials        6        6           
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/2665?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | |
|---|---|---|
| [src/components/Header/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2665/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvSGVhZGVyL2luZGV4LnRzeA==) | `95.65% <100.00%> (ø)` | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None)

github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2665/
ovflowd: Maybe in a next PR as this PR is more like a hot fix? 🙈

Patch:
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 43e38931..63adfa1e 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -99,7 +99,7 @@ const Header = (): JSX.Element => {
         <div className="nav__endwrapper">
           <ul className="right-container">
             {!isMobile && (
-              <li className="nav__tabs">
+              <li className="nav__tabs search-bar">
                 <span className="sr-only">Search Bar</span>
                 <SearchBar />
               </li>
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 606b94ab..aa013948 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -16,7 +16,7 @@ body {
   /* Set in JavaScript */
   --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
   --banner-gradient: linear-gradient(to right, var(--accent9), var(--info7));
-  --nav-height: 72px;
+  --nav-height: 73px;
   --hero-height: 36rem;
   --brand-light: var(--brand3);
   --brand: var(--brand5);
@@ -301,13 +301,6 @@ select {
   list-style: none;
   margin: 0;
   padding-left: 0;
-
-  .nav__tabs:first-child {
-    flex-grow: 1;
-    height: 40px;
-    justify-content: flex-end;
-    position: relative;
-  }
 }
 
 .nav__tabs {
@@ -316,6 +309,14 @@ select {
   display: flex;
   margin-left: var(--space-16);
 
+  &.search-bar {
+    align-items: flex-start;
+    flex-grow: 1;
+    height: 40px;
+    justify-content: flex-end;
+    position: relative;
+  }
+
   &__container {
     align-items: center;
     display: flex;
diff --git a/src/styles/mobile.scss b/src/styles/mobile.scss
index 6f26c718..7e903efb 100644
--- a/src/styles/mobile.scss
+++ b/src/styles/mobile.scss
@@ -108,18 +108,13 @@
   }
 
   .nav .right-container {
-    justify-content: center;
     padding: 0;
     width: 100%;
-
-    .nav__tabs,
-    .nav__tabs:first-child {
-      height: 3em;
-    }
   }
 
   .nav__tabs {
     display: flex;
+    height: 3em;
     margin-left: 0;
 
     &__container {


Test patch:
diff --git a/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap b/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
index 8e90ee05..f3fc58ee 100644
--- a/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
+++ b/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
           class="right-container"
         >
           <li
-            class="nav__tabs"
+            class="nav__tabs search-bar"
           >
             <span
               class="sr-only"
@@ -250,7 +250,7 @@ exports[`Tests for Header component renders correctly 1`] = `
           class="right-container"
         >
           <li
-            class="nav__tabs"
+            class="nav__tabs search-bar"
           >
             <span
               class="sr-only"
diff --git a/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
index 3d5f8c75..b058d75c 100644
--- a/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`CenteredLayout component renders correctly with footer 1`] = `
           class="right-container"
         >
           <li
-            class="nav__tabs"
+            class="nav__tabs search-bar"
           >
             <span
               class="sr-only"
@@ -359,7 +359,7 @@ exports[`CenteredLayout component renders correctly without footer 1`] = `
           class="right-container"
         >
           <li
-            class="nav__tabs"
+            class="nav__tabs search-bar"
           >
             <span
               class="sr-only"
diff --git a/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap
index 9ee94539..cc203f9a 100644
--- a/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Layout component renders correctly with data 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
index 8ed4383d..4afa93a1 100644
--- a/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/404.test.tsx.snap b/test/pages/__snapshots__/404.test.tsx.snap
index 4dcf682f..f38002b4 100644
--- a/test/pages/__snapshots__/404.test.tsx.snap
+++ b/test/pages/__snapshots__/404.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`404 page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/about.test.tsx.snap b/test/pages/__snapshots__/about.test.tsx.snap
index 778e6353..64d50b83 100644
--- a/test/pages/__snapshots__/about.test.tsx.snap
+++ b/test/pages/__snapshots__/about.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`About page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/blog.test.tsx.snap b/test/pages/__snapshots__/blog.test.tsx.snap
index a5ca7d40..9ae7ec80 100644
--- a/test/pages/__snapshots__/blog.test.tsx.snap
+++ b/test/pages/__snapshots__/blog.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Blog page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
@@ -449,7 +449,7 @@ exports[`Blog page renders correctly for empty blogs list 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/community.test.tsx.snap b/test/pages/__snapshots__/community.test.tsx.snap
index 3d481c3d..f3cbc77a 100644
--- a/test/pages/__snapshots__/community.test.tsx.snap
+++ b/test/pages/__snapshots__/community.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Community Page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/governance.test.tsx.snap b/test/pages/__snapshots__/governance.test.tsx.snap
index b6d43ba7..0e78fd3f 100644
--- a/test/pages/__snapshots__/governance.test.tsx.snap
+++ b/test/pages/__snapshots__/governance.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Governance Page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/home.test.tsx.snap b/test/pages/__snapshots__/home.test.tsx.snap
index bde3e4b9..1847c654 100644
--- a/test/pages/__snapshots__/home.test.tsx.snap
+++ b/test/pages/__snapshots__/home.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Home page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
@@ -705,7 +705,7 @@ exports[`Home page renders i18n when feature toggle is present 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/privacy.test.tsx.snap b/test/pages/__snapshots__/privacy.test.tsx.snap
index 919855c8..8bfbb917 100644
--- a/test/pages/__snapshots__/privacy.test.tsx.snap
+++ b/test/pages/__snapshots__/privacy.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Privacy Page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/releases.test.tsx.snap b/test/pages/__snapshots__/releases.test.tsx.snap
index d3cb8d25..c206354f 100644
--- a/test/pages/__snapshots__/releases.test.tsx.snap
+++ b/test/pages/__snapshots__/releases.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Releases page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/resources.test.tsx.snap b/test/pages/__snapshots__/resources.test.tsx.snap
index ac5ea37b..d33fc007 100644
--- a/test/pages/__snapshots__/resources.test.tsx.snap
+++ b/test/pages/__snapshots__/resources.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`About page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/security.test.tsx.snap b/test/pages/__snapshots__/security.test.tsx.snap
index 684771c5..519a6063 100644
--- a/test/pages/__snapshots__/security.test.tsx.snap
+++ b/test/pages/__snapshots__/security.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Security page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/trademark.test.tsx.snap b/test/pages/__snapshots__/trademark.test.tsx.snap
index 5d0f1762..3f0819b2 100644
--- a/test/pages/__snapshots__/trademark.test.tsx.snap
+++ b/test/pages/__snapshots__/trademark.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Trademark page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/__snapshots__/working-groups.test.tsx.snap b/test/pages/__snapshots__/working-groups.test.tsx.snap
index 5df38ba9..1246adc4 100644
--- a/test/pages/__snapshots__/working-groups.test.tsx.snap
+++ b/test/pages/__snapshots__/working-groups.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Working Groups page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/download/__snapshots__/index.test.tsx.snap b/test/pages/download/__snapshots__/index.test.tsx.snap
index ac9856db..325e7ea9 100644
--- a/test/pages/download/__snapshots__/index.test.tsx.snap
+++ b/test/pages/download/__snapshots__/index.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Download page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
@@ -922,7 +922,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/pages/download/__snapshots__/package-manager.test.tsx.snap b/test/pages/download/__snapshots__/package-manager.test.tsx.snap
index d06b6908..04cca57d 100644
--- a/test/pages/download/__snapshots__/package-manager.test.tsx.snap
+++ b/test/pages/download/__snapshots__/package-manager.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Package Manager Page renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/templates/__snapshots__/blog.test.tsx.snap b/test/templates/__snapshots__/blog.test.tsx.snap
index 277414db..850df96a 100644
--- a/test/templates/__snapshots__/blog.test.tsx.snap
+++ b/test/templates/__snapshots__/blog.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"
diff --git a/test/templates/__snapshots__/learn.test.tsx.snap b/test/templates/__snapshots__/learn.test.tsx.snap
index db971e2e..c9d6c0c0 100644
--- a/test/templates/__snapshots__/learn.test.tsx.snap
+++ b/test/templates/__snapshots__/learn.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Learn Template renders correctly 1`] = `
             class="right-container"
           >
             <li
-              class="nav__tabs"
+              class="nav__tabs search-bar"
             >
               <span
                 class="sr-only"