Make manual selection of text close to the copy button more easy

[Jackenmen]

Is your feature request related to a problem? Please describe.

I find it a bit frustrating when the copy button interferes with me moving my mouse towards the end of the code block.

Here's a GIF I took on the sphinx-copybutton's documentation where I'm trying to present my frustration:

What I'm trying to do here is select the end of the text in the code block in order to copy it.

First, I try to start selecting from the right but the copy button gets in the way. After I figure out that I can't do that, I try from the left side though I first run my cursor into the copy button and its tooltip which requires me to move the cursor even further so that I can actually the text behind the copy button. I finally succeed (sort of, as it selects one character more than I wanted) to select the text and so I try to copy it by right-clicking which well, wasn't very successful because I ran my cursor into the copy button again. To not let the copy button win this battle as well, I use Ctrl+C to still succeed in copying it :)

After looking into the usability of the copy button a bit more, I've also noticed that there's an issue with the whole text being selected when I move the mouse on the copy button:

Describe the solution you'd like

I feel it would be best if the copy button was outside of the code block's text area entirely.

GitHub's clone instructions are a good example of how it can look:

I'm guessing that's not of much use since it's a single line text area, so here's also a simple example of how I think it could look more or less:

Describe alternatives you've considered

I think that some padding inside the code block could aid with this problem. It wouldn't be as good as making it separate from the textbox as it would still selecting Perhaps the "Copy" tooltip shouldn't keep the copy button unhidden too? I guess that's part of its appeal though so probably that will need to remain unfixed.

Additional context

Tested on https://sphinx-copybutton.readthedocs.io/en/latest/

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[choldgraf]

I agree that in general it would be useful to have the copy button outside the block of code. However, I think it would be really hard to do this in a way that was theme-agnostic (it is hard enough as it is to do this in a theme-agnostic way, and keeping the copy button overlaid within the code block seems much easier than modifying the code block's structure itself).