fix: remove select item flex to enable truncation, add left spacing for items

[mojitane]

Removes unneeded flex on select items which prevented truncation of long titles from working. Adds left padding to better visualize hierarchy of groups and clickable items inside.

Description

Fixes this issue: #6400 (comment)
Currently, truncation in selects is not working because of flex set to the inner span of each select item. This removes this to fix the truncation issue and adds left padding to each item to further highlight the hierarchy.

On touch devices that don't support hover states it was hard to recognize groups and group items. This gives each item a 'pl-4` left padding to highlight these hierachies for all devies.

Before:

After:

This fix seems to be working fine. The downside of the left padding for items is, that this padding also exists when there aren't any groups used. This is the case on the Blog page.
Question is if this is relevant and improvement is needed to only add padding when groups are used.
Second question is if the previous set flex styles were intended to be used for anything down the road or are used on any page I am not aware of.

Example of Blog page item padding without any groups used:

Validation

Tested the Learn page referenced in the Issue. Also tested About page select and Blog page select.

Related Issues

Fixes #6400

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npx turbo lint to ensure the code follows the style guide. And run npx turbo lint:fix to fix the style errors if necessary.
• I have run npx turbo format to ensure the code follows the style guide.
• I have run npx turbo test to check if all tests are passing.
• I've covered new added functionality with unit tests if necessary.

[vercel]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Mar 3, 2024 1:17am

[ovflowd]

This fix seems to be working fine. The downside of the left padding for items is, that this padding also exists when there aren't any groups used. This is the case on the Blog page.

I guess you can use a CSS not selector or something from tailwind so that if the "section" element doesn't exist, no padding needed? But I guess if you just decrease the padding to be "pl-3" that might be enough?

[github-actions]

Lighthouse Results

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

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	80.18% (433/540)	79.65% (137/172)	73.07% (76/104)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
88	0 💤	0 ❌	0 🔥	4.364s ⏱️

[ovflowd]

LGTM! Awesome work here :)

[mojitane]

This fix seems to be working fine. The downside of the left padding for items is, that this padding also exists when there aren't any groups used. This is the case on the Blog page.

I guess you can use a CSS not selector or something from tailwind so that if the "section" element doesn't exist, no padding needed? But I guess if you just decrease the padding to be "pl-3" that might be enough?

Testing this, I found the place where the flex styling I removed was used. On the download page when using together with an icon for system version.
After restoring the original flex style, I added a span wrapper to style the anonymous flex child. And then added the truncation and padding there. It is now pl-3, only applied via :has when also a group label exists and icons in selects work again.

Simple select

Select with icon

Select with group labels

[shanpriyan]

LGTM! Thanks for your contribution

[AugustinMauroy]

LGTM ! Thanks for your first contribution

[ovflowd]

I'm fast tracking this, even tho this is a visual change, it's simple enough and if there are further objections we can always change.