code-hike/codehike

Problem with copy button overlapping text

dsalazarm opened this issue · 1 comments

Hello:
We're seeing a weird behavior when the 1st line of code is long enough, the copy button overlaps with the text.

I'm attaching some screenshots:

  • Current behavior:
Screenshot 2023-10-26 at 8 42 39 AM
  • Issue:
Screenshot 2023-10-26 at 8 50 00 AM

I found that there is a 0 value for top in this:

if we add, let's say 5px to this property, it will look like this:

  • 5px top value:
Screenshot 2023-10-26 at 8 52 37 AM
  • or with 10px:
Screenshot 2023-10-26 at 9 48 45 AM
  • Another option is changing the top property for .ch-code-button to 5px:
Screenshot 2023-10-26 at 9 51 25 AM

What do you think its the best option for this?

I can create a PR once we make a final decission

I think last one "ch-code" makes more sense