Dropdown should have a top margin of 0.5px

[huyenltnguyen]

Description

The Button component has a top margin of 0.5px while Dropdown doesn't. When Button and Dropdown are used together:

• On desktop, there is a slight difference in the spacing
• On mobile, there is a slight misalignment

Desktop	Mobile

Page tested: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code

Changes needed

To address the issue, I think Dropdown should have a 0.5px top margin.

Though we might want to revisit this in the future, Button or Dropdown probably shouldn't have any margin, and their parent should be responsible for the layout (ref #13).

[a2937]

Excuse me, I have a silly question. How do I test my solution?

[huyenltnguyen]

You can run pnpm storybook, access the Storybook page at localhost:6006, find the Dropdown component and check if it has the expected styles.

[a2937]

I don't seem to have everything I need installed to run Storybook though. Where can I get it?

[huyenltnguyen]

That's strange.

I'm sorry if this is too obvious, but did you run pnpm i after cloning the repo / before running pnpm storybook?

[a2937]

Yes. And I am also using pnpm version 9.1.2 if that helps.

And node v20.13.1

[a2937]

I didn't see those addons listed in package.json directly either, but it's fairly probably that it must have been bundled with something else.