Repository: nodejs/nodejs.dev
Pull request #3204 (2023-02-04 11:38:55)

fix(stability): fixed stability index (#3204
<!--
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 improves API generation by doing a few changes:

- Fixes URLs on Stability Index and better Stability Index generation
- Removes the `version` tag from `<Metadata>` when not needed

This PR also fixes the "Search" input component having a scrollbar when on other translated languages with higher width.

## Related Issues

Fixes https://github.com/nodejs/nodejs.dev/issues/3167


ovflowd: **Note.:** I did not run the `npm run sync-api` in this PR to avoid verbose. We can run the script after the PR gets merged.
codecov-commenter: # [Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) Report
Base: **66.02**% // Head: **66.25**% // Increases project coverage by **`+0.23%`** :tada:
> Coverage data is based on head [(`9fc669c`)](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) compared to base [(`fd57b87`)](https://codecov.io/gh/nodejs/nodejs.dev/commit/fd57b871c2b1ad2f6fb812ed066dec074d76db22?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).
> Patch has no changes to coverable lines.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #3204      +/-   ##
==========================================
+ Coverage   66.02%   66.25%   +0.23%     
==========================================
  Files         118      145      +27     
  Lines        1351     1716     +365     
  Branches      342      398      +56     
==========================================
+ Hits          892     1137     +245     
- Misses        422      534     +112     
- Partials       37       45       +8     
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | |
|---|---|---|
| [src/templates/blog.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9ibG9nLnRzeA==) | `0.00% <0.00%> (-100.00%)` | :arrow_down: |
| [src/hooks/useDetectOs.ts](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2hvb2tzL3VzZURldGVjdE9zLnRz) | `80.00% <0.00%> (-20.00%)` | :arrow_down: |
| [util-node/getNodeReleasesData.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2dldE5vZGVSZWxlYXNlc0RhdGEuanM=) | `91.30% <0.00%> (-6.32%)` | :arrow_down: |
| [src/\_\_fixtures\_\_/page.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL19fZml4dHVyZXNfXy9wYWdlLnRzeA==) | `94.11% <0.00%> (-5.89%)` | :arrow_down: |
| [src/pages/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3BhZ2VzL2luZGV4LnRzeA==) | `100.00% <0.00%> (ø)` | |
| [src/templates/api.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9hcGkudHN4) | `0.00% <0.00%> (ø)` | |
| [src/templates/learn.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9sZWFybi50c3g=) | `100.00% <0.00%> (ø)` | |
| [util-node/createSlug.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2NyZWF0ZVNsdWcuanM=) | `100.00% <0.00%> (ø)` | |
| [util-node/getNvmData.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2dldE52bURhdGEuanM=) | `100.00% <0.00%> (ø)` | |
| [src/hooks/useOnScreen.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2hvb2tzL3VzZU9uU2NyZWVuLnRzeA==) | `100.00% <0.00%> (ø)` | |
| ... and [187 more](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | |

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)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/3204?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).

ovflowd: cc @nodejs/website @nodejs/nodejs-dev 
AugustinMauroy: Should you resync the docs?
ovflowd: > Should you resync the docs? (in this pr)

Not in this PR. I wrote here that I will sync after this PR gets merged. https://github.com/nodejs/nodejs.dev/pull/3204#issuecomment-1416730359

You can test this locally by checking out this branch and running `npm run sync-api` before starting Gatsby :)
ovflowd: > CSS ins't applied. I'm searching an solution.

This issue is only on your side.
MrJithil: Is this is to fix the #3167 , why should I work on it?
MrJithil: Are you interested to work on this issue? You can comment on the issue and take it. Hope you already aware that I am already started working. 
ovflowd: > Is this is to fix the https://github.com/nodejs/nodejs.dev/issues/3167 , why should I work on it?

As described in the PR description, yes, this PR fxes #3167 completely.

> Are you interested to work on this issue? 

I mean, the PR is ready, so the solution is ready.

> You can comment on the issue and take it. Hope you already aware that I am already started working.

I am aware that you were interested in working on the issue, but honestly speaking, as the person with the closest knowledge of the inner workings of our API parsing system, I took the liberty of working on this issue, as I knew an elegant way of solving this that is not hacky.

I appreciate your time and interest in working on #3167. Your contributions are valued.

Patch:
diff --git a/src/components/ApiComponents/Components/Stability/index.module.scss b/src/components/ApiComponents/Components/Stability/index.module.scss
index 0803ead7..524d04a1 100644
--- a/src/components/ApiComponents/Components/Stability/index.module.scss
+++ b/src/components/ApiComponents/Components/Stability/index.module.scss
@@ -6,11 +6,16 @@
   padding: 1rem;
 
   p {
+    display: inline;
     margin: 0;
   }
 
   a {
     color: #fff;
+
+    code {
+      color: #fff !important;
+    }
   }
 
   &__level-0 {
diff --git a/src/components/ApiComponents/Components/Stability/index.tsx b/src/components/ApiComponents/Components/Stability/index.tsx
index 7bf99bb4..908e122a 100644
--- a/src/components/ApiComponents/Components/Stability/index.tsx
+++ b/src/components/ApiComponents/Components/Stability/index.tsx
@@ -1,14 +1,9 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import styles from './index.module.scss';
 
-interface Props {
-  stability: {
-    level: number;
-    text: string;
-  };
-}
+type Props = PropsWithChildren<{ stability: number }>;
 
 const getStabilityClass = (stability: number) => {
   switch (stability) {
@@ -23,9 +18,10 @@ const getStabilityClass = (stability: number) => {
   }
 };
 
-const Stability = ({ stability: { level, text } }: Props) => (
-  <div className={`${styles.stability} ${getStabilityClass(level)}`}>
-    <FormattedMessage id="docs.api.stability" values={{ level, text }} />
+const Stability = ({ stability, children }: Props) => (
+  <div className={`${styles.stability} ${getStabilityClass(stability)}`}>
+    <FormattedMessage id="docs.api.stability" values={{ level: stability }} />
+    {children}
   </div>
 );
 
diff --git a/src/components/ApiComponents/index.tsx b/src/components/ApiComponents/index.tsx
index 5b3ab97a..2dc4a85f 100644
--- a/src/components/ApiComponents/index.tsx
+++ b/src/components/ApiComponents/index.tsx
@@ -13,7 +13,7 @@ interface ApiComponentsProps {
 
 const getApiComponents = ({ fullVersion }: ApiComponentsProps) => {
   const Metadata = ({ data }: MetadataProps): JSX.Element | null => {
-    const { changes, update, stability, source_link: sourceLink } = data;
+    const { changes, update, source_link: sourceLink } = data;
 
     if (changes && update) {
       return <Components.Changes changes={changes} update={update} />;
@@ -23,10 +23,6 @@ const getApiComponents = ({ fullVersion }: ApiComponentsProps) => {
       return <Components.Span version={update.version} type={update.type} />;
     }
 
-    if (stability) {
-      return <Components.Stability stability={stability} />;
-    }
-
     if (sourceLink) {
       return <Components.SourceLink version={fullVersion} link={sourceLink} />;
     }
diff --git a/src/components/CommonComponents/SearchBar/index.tsx b/src/components/CommonComponents/SearchBar/index.tsx
index ffb7fc48..89a70da3 100644
--- a/src/components/CommonComponents/SearchBar/index.tsx
+++ b/src/components/CommonComponents/SearchBar/index.tsx
@@ -23,7 +23,7 @@ const containerVariants = {
   collapsed: {
     minHeight: '0em',
     width: '100%',
-    maxWidth: '100px',
+    maxWidth: 'min-content',
     boxShadow: 'none',
   },
 };
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index c7f9897f..bdcd2e1f 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -74,7 +74,7 @@
   "docs.api.sourceLink": "Source Code:",
   "docs.api.history.version": "Version",
   "docs.api.history.changes": "Changes",
-  "docs.api.stability": "Stability: {level}{text}",
+  "docs.api.stability": "Stability: {level} - ",
   "components.header.links.about": "About",
   "components.header.links.certification": "Certification",
   "components.author.githubLinkLabel": "{username} Github - opens in new tab",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index c7f9897f..bdcd2e1f 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -74,7 +74,7 @@
   "docs.api.sourceLink": "Source Code:",
   "docs.api.history.version": "Version",
   "docs.api.history.changes": "Changes",
-  "docs.api.stability": "Stability: {level}{text}",
+  "docs.api.stability": "Stability: {level} - ",
   "components.header.links.about": "About",
   "components.header.links.certification": "Certification",
   "components.author.githubLinkLabel": "{username} Github - opens in new tab",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index c741114f..05d22506 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -74,7 +74,7 @@
   "docs.api.sourceLink": "Code source:",
   "docs.api.history.version": "Version",
   "docs.api.history.changes": "Changements",
-  "docs.api.stability": "Stabilité: {level}{text}",
+  "docs.api.stability": "Stabilité: {level} - ",
   "components.header.links.about": "À propos",
   "components.header.links.certification": "Certification",
   "components.author.githubLinkLabel": "{username} Github - s'ouvre dans un nouvel onglet",
diff --git a/src/i18n/locales/he.json b/src/i18n/locales/he.json
index 8c565ae7..0e86a9f9 100644
--- a/src/i18n/locales/he.json
+++ b/src/i18n/locales/he.json
@@ -74,7 +74,7 @@
   "docs.api.sourceLink": "קוד מקור:",
   "docs.api.history.version": "גרסה",
   "docs.api.history.changes": "שינויים",
-  "docs.api.stability": "יציבות: {level}{text}",
+  "docs.api.stability": "יציבות: {level} - ",
   "components.header.links.about": "אודות",
   "components.header.links.certification": "אישורים",
   "components.author.githubLinkLabel": "{username} Github - opens in new tab",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 6366bf8e..c470124f 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -74,7 +74,7 @@
   "docs.api.sourceLink": "ソースコード:",
   "docs.api.history.version": "バージョン",
   "docs.api.history.changes": "変更",
-  "docs.api.stability": "安定性: {level}{text}",
+  "docs.api.stability": "安定性: {level} - ",
   "components.header.links.about": "Node.js とは",
   "components.header.links.certification": "認定",
   "components.author.githubLinkLabel": "{username} Github - 新しいタブで開く",
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index ec55ad23..deb257c9 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -74,7 +74,7 @@
   "docs.api.sourceLink": "Código-Fonte:",
   "docs.api.history.version": "Version Versão",
   "docs.api.history.changes": "Mudanças",
-  "docs.api.stability": "Estabilidade: {level}{text}",
+  "docs.api.stability": "Estabilidade: {level} - ",
   "components.header.links.about": "Sobre",
   "components.header.links.certification": "Certificação",
   "components.author.githubLinkLabel": "GitHub {username} - abrir em uma nova aba",
diff --git a/src/i18n/locales/zh-cn.json b/src/i18n/locales/zh-cn.json
index 34a748f8..3c8de796 100644
--- a/src/i18n/locales/zh-cn.json
+++ b/src/i18n/locales/zh-cn.json
@@ -74,7 +74,7 @@
   "docs.api.sourceLink": "源代码：",
   "docs.api.history.version": "版本",
   "docs.api.history.changes": "历史变更",
-  "docs.api.stability": "稳定级别：{level}{text}",
+  "docs.api.stability": "稳定级别：{level} - ",
   "components.header.links.about": "关于",
   "components.header.links.certification": "认证",
   "components.author.githubLinkLabel": "Github 的用户“{username}”以新窗口方式打开",
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
index c5e67bc0..1d21b4ca 100644
--- a/src/mdxComponents.ts
+++ b/src/mdxComponents.ts
@@ -12,6 +12,7 @@ export const mdxComponents = {
 };
 
 export const apiMdxComponents = {
+  Stability: ApiComponents.Stability,
   DataTag: ArticleComponents.DataTag,
   a: ApiComponents.ApiLink,
   h3: ApiComponents.H3,
diff --git a/src/types/api.ts b/src/types/api.ts
index 8c7b9fd2..af3cb7db 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -14,7 +14,6 @@ export interface ApiComponentData {
   name?: string;
   source_link?: string;
   update?: ApiUpdate;
-  stability?: { level: number; text: string };
   changes?: ApiChange[];
 }
 
diff --git a/util-node/apiDocsTransformUtils.js b/util-node/apiDocsTransformUtils.js
index b3e8d171..85480112 100644
--- a/util-node/apiDocsTransformUtils.js
+++ b/util-node/apiDocsTransformUtils.js
@@ -129,17 +129,12 @@ function createApiDocsFrontmatter(firstLine, { version, name }) {
 
 // Utility to replace the `> Stability: XXXXXX` blockquotes and their following lines
 // into a proper metadata with the information (index number) and any other accompanying text
-function replaceStabilityIndex(metadata) {
+function replaceStabilityIndex() {
   return (_, __, level, text) => {
-    const sanitizedText = text
-      .replace(/(\n)>/g, '')
-      .replace(/\[(.+)\]\[\]/g, (___, piece) => piece);
+    const sanitizedText = text.replace(/(\n)>/g, '').replace(/^ - /, '');
+    const stability = Number(level);
 
-    const data = safeJSON.toString({
-      stability: { level: Number(level), text: sanitizedText },
-    });
-
-    return `<Metadata version="${metadata.fullVersion}" data={${data}} />`;
+    return `<Stability stability={${stability}}>\n\n${sanitizedText}\n\n</Stability>`;
   };
 }
 
@@ -234,7 +229,11 @@ function replaceMarkdownMetadata(metadata, navigationCreator) {
 
         const stringifiedData = safeJSON.toString(parsedYaml);
 
-        return `<Metadata version="${metadata.fullVersion}" data={${stringifiedData}} />`;
+        if (parsedYaml.source_link) {
+          return `<Metadata version="${metadata.fullVersion}" data={${stringifiedData}} />`;
+        }
+
+        return `<Metadata data={${stringifiedData}} />`;
       }
     } catch (e) {
       // eslint-disable-next-line no-console


Test patch:
diff --git a/src/components/ApiComponents/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ApiComponents/__tests__/__snapshots__/index.test.tsx.snap
index 38d705e3..30dfc575 100644
--- a/src/components/ApiComponents/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/ApiComponents/__tests__/__snapshots__/index.test.tsx.snap
@@ -39,14 +39,3 @@ exports[`ApiComponents component renders Components Span correctly 1`] = `
   }
 />
 `;
-
-exports[`ApiComponents component renders Components Stability correctly 1`] = `
-<Stability
-  stability={
-    {
-      "level": 0,
-      "text": "test",
-    }
-  }
-/>
-`;
diff --git a/src/components/ApiComponents/__tests__/index.test.tsx b/src/components/ApiComponents/__tests__/index.test.tsx
index 886cf107..d3a2f5bc 100644
--- a/src/components/ApiComponents/__tests__/index.test.tsx
+++ b/src/components/ApiComponents/__tests__/index.test.tsx
@@ -41,18 +41,6 @@ describe('ApiComponents component', (): void => {
     expect(component).toMatchSnapshot();
   });
 
-  it('renders Components Stability correctly', (): void => {
-    const components = getApiComponents({ fullVersion: version });
-    const data: ApiComponentData = {
-      stability: {
-        level: 0,
-        text: 'test',
-      },
-    };
-    const component = components({ data });
-    expect(component).toMatchSnapshot();
-  });
-
   it('renders Components SourceLink correctly', (): void => {
     const components = getApiComponents({ fullVersion: version });
     const data: ApiComponentData = {
diff --git a/src/components/CommonComponents/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap b/src/components/CommonComponents/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap
index c2ab6ff0..45165fbf 100644
--- a/src/components/CommonComponents/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap
+++ b/src/components/CommonComponents/SearchBar/__tests__/__snapshots__/SearchBar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`SearchBar component should render correctly 1`] = `
     <div>
       <div
         class="searchBarContainer"
-        style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+        style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
       >
         <div
           class="searchInputContainer"
@@ -46,7 +46,7 @@ exports[`SearchBar component should render correctly 1`] = `
   "container": <div>
     <div
       class="searchBarContainer"
-      style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+      style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
     >
       <div
         class="searchInputContainer"
diff --git a/src/layouts/__tests__/__snapshots__/index.test.tsx.snap b/src/layouts/__tests__/__snapshots__/index.test.tsx.snap
index 583afe23..6d487f03 100644
--- a/src/layouts/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/layouts/__tests__/__snapshots__/index.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`Layout component renders correctly with data 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
diff --git a/src/layouts/__tests__/__snapshots__/page.test.tsx.snap b/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
index 37fb1a44..84ce5a8c 100644
--- a/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
+++ b/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
diff --git a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
index f0a4d7a3..8f8bfdc0 100644
--- a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`Resources page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
diff --git a/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
index 20a440a3..c3d62e30 100644
--- a/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`Download page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
@@ -1139,7 +1139,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
diff --git a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
index f2b2eea9..ea383588 100644
--- a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
+++ b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`Package Manager Page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
diff --git a/src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap b/src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap
index 57dcea08..ccac24dc 100644
--- a/src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
             </span>
             <div
               class="searchBarContainer"
-              style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+              style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
             >
               <div
                 class="searchInputContainer"
@@ -334,7 +334,7 @@ exports[`Tests for Header component renders correctly 1`] = `
             </span>
             <div
               class="searchBarContainer"
-              style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+              style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
             >
               <div
                 class="searchInputContainer"
@@ -585,7 +585,7 @@ exports[`Tests for Header component renders shorter menu items for mobile 1`] =
             </span>
             <div
               class="searchBarContainer"
-              style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+              style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
             >
               <div
                 class="searchInputContainer"
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
index 5dfe6aeb..23f8e9e5 100644
--- a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`Learn Template renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
diff --git a/src/templates/__tests__/__snapshots__/post.test.tsx.snap b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
index c622b6e2..0ef32c74 100644
--- a/src/templates/__tests__/__snapshots__/post.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 0em; width: 100%; max-width: 100px; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: min-content; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"