Skip to content

fix: vertically center dropdown label#1490

Open
lirenjie95 wants to merge 3 commits into
processing:v1from
lirenjie95:fix/dropdown-label-vertical-center
Open

fix: vertically center dropdown label#1490
lirenjie95 wants to merge 3 commits into
processing:v1from
lirenjie95:fix/dropdown-label-vertical-center

Conversation

@lirenjie95

@lirenjie95 lirenjie95 commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

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

screenshot

@doradocodes

Copy link
Copy Markdown
Contributor

@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

lirenjie95 commented Jul 2, 2026

Copy link
Copy Markdown
Contributor Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The "Language" and "Accessibility" dropdowns are not vertically centered

2 participants