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