Layout bug on staking withdrawals page

[wackerow]

Describe the bug

At specific screen widths, we lose the top margin on the "When's it shipping" box being displayed on the Withdrawals page, which is the only "staking" template page that uses this. Also seeing the "Staking options" not displaying full width just below the tablet breakpoint.

To reproduce

1. Go to https://ethereum.org/en/staking/withdrawals on desktop
2. Adjust window width between 990 and 1024px
3. See layout of "When's it shipping" box and "Staking options" dropdown menu width

Expected behavior

Would expect a single breakpoint to switch from desktop to tablet view, without multiple layout shifts. Would expect "Staking options" dropdown to always be full width on tablet or smaller (when located at the bottom of the display). Also should not lose the top margin on the "When's it shipping" box.

Screenshots

1024px wide:

1023px wide:

991px wide:

Desktop (please complete the following information)

macOS Ventura 13.2.1
Brave latest (112.0.5615.121)

Smartphone (please complete the following information)

No response

Additional context

No response

Would you like to work on this issue?

• Yes
• No

[MrJithil]

ethereum-org-website/src/components/ButtonDropdown.tsx

Line 143 in a2da905

minW={{ base: "100%", lg: "240" }}

[MahendraBishnoi29]

@MrJithil why are mentioning this line? 🤔

[amit-ksh]

Hey @wackerow, I would like to work on this issue, please assign it to me.

[amit-ksh]

Hey @wackerow, I've fixed the "Staking options" dropdown button width and the other two issues have been mentioned multiple layout shifts and losing the margin-top of "When's it shipping" are happening because the staking.tsx template still using the emotion, and breakpoints used in it little smaller than the Chakra ones. This will probably get fixed once the staking.tsx template migrated to Chakra, there is already a PR raised for this #10019

So, I'm raising a PR only fixing the width of the Dropdown button, let me know your thought on this.

[amit-ksh]

Hey @wackerow, I think we should wait for the migration of templates/staking.tsx (PR #10019) because it probably fixes all the problems you mentioned.

[amit-ksh]

Hey @wackerow! This issue has been fixed by this PR [#10019]. You can close this issue.

[wackerow]

Awesome, thanks @amit-ksh! And thank you @soheil555 for the patch! LGTM =)