fix: make the `searchButton` width dynamic to fit the content

[nazarepiedady]

closes #6903 closes #6841

Description

In this pull request, I am solving the problem I figured out and reported on #6903 (now closed) and #6841 issue. It's a simple solution with a great visual impact on the issue, and finally, the solution works correctly on all idioms of the website.

Validation

Before	Now

Related Issues

• https://github.com/nodejs/nodejs.org/issues/6903
• https://github.com/nodejs/nodejs.org/issues/6841

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npm run format to ensure the code follows the style guide.
• [x] I have run npm run test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jul 21, 2024 3:22pm

[nazarepiedady]

@mikeal, @AugustinMauroy, could you do the honour of reviewing and merging this pull request, please?

[nilkhankari]

With these changes, the issue still occurs for viewport 1030.

[ovflowd]

With these changes, the issue still occurs for viewport 1030.

This is something else, not related to this issue. There's just literally no enough space to render things here.

[github-actions[bot]]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 99	🟢 100	🟢 100	🟢 92	🔗

[github-actions[bot]]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.67% (593/654)	76.08% (175/230)	94.57% (122/129)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 :zzz:	0 :x:	0 :fire:	5.244s :stopwatch:

[ovflowd]

@nazarepiedady could we set a max-width for ensuring specific breakpoints aren't broken with this?

I'd go to the lengths we could even use text ellipsis here and actually remove the ... from the translation text.

[nazarepiedady]

@ovflowd, I can slightly see your point, so allow me to test it to see what we will have.

[nazarepiedady]

@ovflowd, @AugustinMauroy, could you review the new updates?

I went a little beyond to solve this little issue.

[nazarepiedady]

@nilkhankari, would you like to test again to see how it seems now?