lingodotdev
Bug Report: Copy button overlaps text in code block
Description
The copy-to-clipboard icon on code snippets overlaps with the code text, making it hard to read or select the code on smaller screens (especially mobile view).
Steps to Reproduce:
-
Go to the Lingo.dev Docs page (e.g., Installation or Basic setup section).
-
View the page on a mobile device or resize the browser window to a smaller width.
Expected Behavior:
the icon should Stay aligned to the top-right corner outside the code text area.
Not overlap with the code text, ensuring full visibility and readability.
Hi @aryan1752 , I’d like to work on this issue! Could you please assign it to me?
From the description, it seems that the copy-to-clipboard icon overlaps with the code block text on smaller screens. My plan to fix this issue would be:
Inspect the code block container (likely a div wrapping the code) and the icon element.
Adjust the positioning — probably by adding position: relative to the parent container and setting the icon as position: absolute; top: 8px; right: 8px; (or similar).
Add responsive styling — using media queries to ensure the icon remains visible but doesn’t overlap with the text on smaller screens.
Test across different screen sizes (especially mobile view) to ensure readability and accessibility.
If that sounds good, please assign this issue to me — I’d be happy to start working on it right away 🚀
Thanks!
Hi @aryan1752 , I'd like to take a look at fixing this issue. Can I be assigned to it?
HI @aryan1752 i like to work on this , can you assign this to me ? thanks ;)
Hi @aryan1752 , I would like to work on this , could you please assign this task to me ?
But it doesn't seem to be showing the mobile devices. that copy button is overlap
Go to quick start in hamburger and you will see it I can see it , can I start working on this . :)
Hi @aryan1752 :) I have some experience working on UI, I would love to contribute!
