Show copy code block icon only on hover

[praveen-quizizz]

Expected Behavior

The copy icon should be displayed when the user hovers over the code block.

Current Behavior

Currently the icon is always visible leading to poor reading experience.

Screenshots

Steps to reproduce

Please provide detailed steps for reproducing the issue

1. Goto any article with code block e.g. https://www.codu.co/articles/setting-up-metacall-development-environment-on-windows-jxk6iltl

[github-actions[bot]]

Hello @praveen-quizizz, thanks for opening your first issue! your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.

[Shane-Donlon]

Hi Praveen,

Requirements update:

1. The copy / clipboard button should be visible for mobile.
2. The code excerpt / text should be completely visible to reduce side-scrolling.
3. On desktop the copy / clipboard button should be visible on mouse hover.

Thanks, Shane

[sudarshansb143]

@NiallJoeMaher Suggested enhancement here. Is the underlined empty space on code block is is needed or we can make copy code button positioning absolute so that it will remove this empty space ?

Ex.

[NiallJoeMaher]

Thanks for that @sudarshansb143! We did that. 🥳