Inappropriate padding in code blocks

[wackerow]

Describe the bug

The Codeblock component is used to render various types of code snippets from the triple-backtick markdown syntax (```). These blocks currently do not have appropriate padding applied to them.

To reproduce

1. Go to https://ethereum.org/en/developers/tutorials/all-you-can-cache (or any page with code snippets)
2. Scroll down to some code snippets
3. Notice the lack of padding on the bottom of the code blocks

Expected behavior

Codeblocks should have 1.5rem padding-bottom applied to improve readability

Screenshots

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

Note that some codeblocks have a "copy" button added to it which alters the top padding; this should remain unchanged. The codeblocks without the copy button use 24px (1.5rem, size token 6) for the top padding; I would recommend we use the same for the bottom.

Similarly, some code blocks are longer than others... there is a max-height applied initially, with a "Show all" button for longer blocks. In those cases, we do not need padding if there is more code to scroll to, but once we're at the bottom there should be padding.

Would you like to work on this issue?

• [ ] Yes
• [X] No

[Baystef]

Describe the bug

The Codeblock component is used to render various types of code snippets from the triple-backtick markdown syntax (```). These blocks currently do not have appropriate padding applied to them.

To reproduce

1. Go to https://ethereum.org/en/developers/tutorials/all-you-can-cache
2. Scroll down to some code snippets
3. Notice the lack of padding on the bottom of the code blocks

Expected behavior

Codeblocks should have 1.5rem padding-bottom applied to improve readability

Screenshots

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

Note that some codeblocks have a "copy" button added to it which alters the top padding; this should remain unchanged. The codeblocks without the copy button use 24px (1.5rem, size token 6) for the top padding; I would recommend we use the same for the bottom.

Similarly, some code blocks are longer than others... there is a max-height applied initially, with a "Show all" button for longer blocks. In those cases, we do not need padding if there is more code to scroll to, but once we're at the bottom there should be padding.

Would you like to work on this issue?

• [x] Yes
• [ ] No

[wackerow]

Hey @Baystef hah are you trying to say "Yes" you'd like to work on this?

[Baystef]

Hey @Baystef hah are you trying to say "Yes" you'd like to work on this?

Yes, please @wackerow

[wackerow]

Great, thanks! Assigning =)

[sandeepV2]

@wackerow @Baystef I see this behaviour across all the tutorial pages. Sorry but, Couldn't resist to solve it.

[Baystef]

@wackerow @Baystef I see this behaviour across all the tutorial pages. Sorry but, Couldn't resist to solve it.

interesting

[wackerow]

Looping back, appreciate the patch @sandeepV2... @Baystef apologies for the override, mind if we re-assign and find another one for ya? Would check out the unassigned "good first issues" if you're interested!

[Baystef]

Looping back, appreciate the patch @sandeepV2... @Baystef apologies for the override, mind if we re-assign and find another one for ya? Would check out the unassigned "good first issues" if you're interested!

Sure, I'll look through and tag you to it