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

[doradocodes]

Most appropriate sections of the p5.js website?

Home

What is your operating system?

Mac OS

Web browser and version

Chrome

Actual Behavior

The icon and the label are not vertically centered to the dropdown background:

Expected Behavior

It seems like the icons and the caret arrows are aligned vertically as expected, but the label is not.

Steps to reproduce

No response

Would you like to work on the issue?

No

[lirenjie95]

Root cause is in src/components/Dropdown/styles.module.scss: the icon and caret are position: absolute, but the label is a normal in-flow <span> and .selected has no vertical centering — so the label sits too high while the icon/caret look fine.

Fix — center the button's in-flow content (the label); the absolutely-positioned icon/caret are unaffected:

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

Happy to open a PR.

[doradocodes]

Hi @lirenjie95, thanks for looking into this issue! I agree that the icon and caret should be placed with flexbox instead of absolute positioning. Will take a closer look into your PR.

For future reference: please wait to be assigned to an Issue before opening a PR. This helps us stay organized with who works on what! You can read more about the contributor guidelines here. I will assign this Issue to you now.

Edit: sorry @lirenjie95, didn't realize you're a steward! You can assign yourself the issue next time.

[lirenjie95]

Edit: sorry @lirenjie95, didn't realize you're a steward! You can assign yourself the issue next time.

Looks like I'm not a Collaborator of p5.js-website. @ksen0 Is it possible for me to apply for it? 😆