fix: Certain languages break the max height of the search bar #6841

nodejs / nodejs.org

The Node.js® Website

https://nodejs.org

MIT License

5.99k stars 6.15k forks source link

fix: Certain languages break the max height of the search bar #6841 #6842

Open nilkhankari opened 2 weeks ago

nilkhankari commented 2 weeks ago

Description

Increased width of search button from 13rem to 15rem

Validation

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] commented 2 weeks ago

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

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

bmuenzenmeyer commented 2 weeks ago

Two things

The keyboard shortcut still wraps. This is perhaps a separate issue, but we are in this section of the codebase here and it seems relevant to improve.

There is a viewport range (for me, on WIndows, Chrome, default zoom, fr locale) between1024px and 1114px where the site has a horizontal scrollbar.

I'd imagine we want to avoid that.

nilkhankari commented 1 week ago

Hi @bmuenzenmeyer , Thanks for the review. I am thinking of setting the width of the search button to 16rem. This will resolve the first issue. Regarding the second issue, I am considering reducing the gap and padding to 1rem. Do you have any suggestions on this proposed solution?

ovflowd commented 1 week ago

Hi @bmuenzenmeyer , Thanks for the review. I am thinking of setting the width of the search button to 16rem. This will resolve the first issue. Regarding the second issue, I am considering reducing the gap and padding to 1rem. Do you have any suggestions on this proposed solution?

I think this is fine. Can you go ahead with it? (Dont forget to test different viewports, including mobile ones)

nilkhankari commented 1 week ago

Validation with new changes

For French language