fix: vertically center dropdown label

[lirenjie95]

Fixes #1482

Problem

In the collapsed Language / Accessibility dropdowns, the icon and caret are position: absolute (manually offset to look centered), but the label is a normal in-flow <span> and .selected had no vertical centering — so the label sat too high relative to the icon and caret.

Fix

Flex-center the button's in-flow content in src/components/Dropdown/styles.module.scss:

.selected {
  display: flex;
  align-items: center;
}

Because the icon and caret are absolutely positioned (out of flow), only the label is affected — the already-aligned icon and caret don't move.

Testing

Verified in the browser that the label is now vertically centered with the icon and caret (tablet/desktop breakpoints and the expanded dropdown state).

Screenshot

[doradocodes]

@lirenjie95 We tested the fix and the label looks vertically centered now! I think you could also remove the absolute positioning on the icons as well, and readjust the spacing. Thanks!

[lirenjie95]

@doradocodes Done — the collapsed dropdown now uses a flex row instead of absolute positioning, so the icon, label and chevron align automatically. Kept the change minimal and left the expanded list as-is. Pushed in the latest commit.

[doradocodes]

@lirenjie95 One more thing: I realized that all the items in the dropdown also have the same issue. Could you also apply the same fix to the items?

[lirenjie95]

@doradocodes Good catch — applied the same flex layout to the dropdown items as well. The icon and label in each option are now vertically centered.

[lirenjie95]

Also ported this change to main in #1500

[doradocodes]

@lirenjie95 I saw that the flexbox change was applied to the dropdown items as well, but I noticed that there was still a small misalignment that didn't fully allow the items to be vertically centered. Looking into it, I saw it was caused by the label being a <button> wrapped in a <span>. Locally, I applied display: flex; align-items: center; to the .option button selector in the styles.module.css and it is now fully vertically aligned.

Here's a side-by-side comparison:

With the extra display:flex; applied:

So I think you can add that display: flex; align-items: center; to the .option button selector and this PR will be good to go!

[lirenjie95]

Added for both #1490 and #1500. Thank you for the advice! @doradocodes