Fix style for the Select component

[pkrasicki]

Fix style for the Select component

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Fixes #1804

Description

Fixes the width of dropdowns and changes their style a little bit.

Screenshots

Testing

Testing dropdowns manually on settings page, channel view and in comment section with different window sizes.

Desktop

• OS: Any
• OS Version: Any
• FreeTube version: 0.19.1 dev

Additional context

None.

[kommunarr]

I'll check this out. FYI, you can run npm run lint-fix to resolve the linting issues.

[kommunarr]

praise: I think it's a positive change. It is more visually prominent, which some may not like, but I think that's ultimately a better choice for accessibility. It was sometimes difficult to see how wide the dropdown & its click area was before. I also did not encounter the original bug, so that looks good as well.

issue (pre-existing): This isn't a new issue with the ft-select component, but I do see that this particular one is unclickable on its bottom half (it's at the top of the comments section for a given video). This is most likely related to its placement rather than the component itself, but take a jab at this if you don't mind.

chore (blocking): Just run the npm run lint-fix command (may have to do a soft git reset first) to resolve the linting issues.

[pkrasicki]

I fixed the linting issues and the problem with sort dropdown in the comments section.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Noticed that the tooltip placement moved from just above the dropdown arrow.

[pkrasicki]

It's still at the end of the visible boundary. I think it would be a bit weird to move it:

[efb4f5ff-1298-471a-8973-3d47447115dc]

Maybe im a bit biased because i got used to that alignment but to me it looks more visually pleasing. If this is the better way to do it than we should definitely keep this. Lets wait for others to have a say in it.

[pkrasicki]

Btw, I think it should be in the same position for dropdowns and input fields.

[kommunarr]

I think both look fine, although after looking at it for too long, the difference in right alignment is actually quite vexing to me. I'd probably prefer changing it, and see if making the left-aligned label have the same margin as the right makes things better or worse (probably worse, if I were to wager). I think the differing placement of the tooltips compared to ft-input is fine and makes sense based on width if the item below is addressed, but you can experiment with that.

nitpick (pre-existing): These should probably have a max-inline-size to prevent this type of stretching behavior. Ideally, this would be configurable as a prop to allow overrides.

[pkrasicki]

I think both look fine, although after looking at it for too long, the difference in right alignment is actually quite vexing to me. I'd probably prefer changing it, and see if making the left-aligned label have the same margin as the right makes things better or worse (probably worse, if I were to wager). I think the differing placement of the tooltips compared to ft-input is fine and makes sense based on width if the item below is addressed, but you can experiment with that.

I'm not sure I understand. What do you want me to do exactly?

nitpick (pre-existing): These should probably have a max-inline-size to prevent this type of stretching behavior.

They do. But someone wanted all dropdowns to be full-width on smaller resolutions: https://github.com/FreeTubeApp/FreeTube/blob/development/src/renderer/components/ft-select/ft-select.css#L156. I think it's a good thing, but maybe I would move the breakpoint to 680px. It's an issue of mobile layout, though.

[kommunarr]

Thanks for checking on that! I would trust @MarmadileManteater on that more than me, so you can keep that the same. For the first part, yes, I'm leaning towards @efb4f5ff-1298-471a-8973-3d47447115dc's suggestion.

[kommunarr]

Hi @pkrasicki, are you still good to implement that final suggestion?

[pkrasicki]

@jasonhenriquez done.

[PikachuEXE]

Issue spotted but already exists in dev branch (i.e. not introduced by this PR)

at width ~901px

So the only diff is the select got a box like style?

[kommunarr]

@PikachuEXE It also fixes the click area to match its visual area. Like when trying to click between the area between the bottom border and the arrow here.