code-block copy button hides content

[dviererbe]

The copy button of code-blocks can hide content, see for example:

.. code-block:: text

   Ut voluptatem molestiae consectetur provident. Voluptates eveniet deserunt quia rerum. Et debitis quisquam est ipsam dolores explicabo similique quod. Eligendi itaque cum ut veniam aut nisi. Aliquam dolore id maiores eius omnis est ipsum.
   Veniam ducimus accusamus porro maxime esse mollitia a magnam. Qui quidem molestiae ab doloribus voluptatem asperiores. Molestias voluptates iure in.
   Voluptate eos error et facere. Quia impedit omnis quae odit aut esse atque in. Quo consequatur iure eos quia. Molestias expedita id aut ex reprehenderit sed velit error.
   Dignissimos ut cum quis at totam vel quia. Similique molestias soluta asperiores culpa fugit aut qui pariatur. Qui quasi minima voluptatum quibusdam ut nesciunt.
   Dolorem corrupti maiores quasi. Velit est aut nobis. Sint totam et et. Nostrum ex et sit commodi et. Eius necessitatibus quia doloremque nesciunt.

rendered as:

I propose three possible solutions:

1. Hide button by default and only show on mouse hover over the code block

   .highlight button.copybtn {
       opacity: 0;
   }

2. Hide button on mouse hover over the code block unless the mouse hovers over the copy button

   .highlight:hover button.copybtn {
       opacity: 0;
   }
   
   .highlight button.copybtn:hover {
       opacity: 1
   }

3. Add margin to the <pre> element below the copy button, therefore the button can not cover any content.

   .highlight pre {
       margin-right: 2.5em;
   }

   This would look like this

Note: GitHub seems to solve this by hiding the copy button when you start scrolling or selecting text. It also start to show the copy button as soon as the mouse is near the copy button. I think they use javascript, because I could not find any :hover css for the copy button. Try it out for yourself:

Ut voluptatem molestiae consectetur provident. Voluptates eveniet deserunt quia rerum. Et debitis quisquam est ipsam

Ut voluptatem molestiae consectetur provident. Voluptates eveniet deserunt quia rerum. Et debitis quisquam est ipsam dolores explicabo similique quod. Eligendi itaque cum ut veniam aut nisi. Aliquam dolore id maiores eius omnis est ipsum.

Veniam ducimus accusamus porro maxime esse mollitia a magnam. Qui quidem molestiae ab doloribus voluptatem asperiores. Molestias voluptates iure in.

Voluptate eos error et facere. Quia impedit omnis quae odit aut esse atque in. Quo consequatur iure eos quia. Molestias expedita id aut ex reprehenderit sed velit error.

Dignissimos ut cum quis at totam vel quia. Similique molestias soluta asperiores culpa fugit aut qui pariatur. Qui quasi minima voluptatum quibusdam ut nesciunt.

Dolorem corrupti maiores quasi. Velit est aut nobis. Sint totam et et. Nostrum ex et sit commodi et. Eius necessitatibus quia doloremque nesciunt.

Note: I also noted that there is margin on the left side on the code block, but not on the right. Is this on purpose? See image above.

Note: There also seems to be problems with the "Copied!" text, when you click on the button and content is below:

[ru-fu]

According to the copybutton docs, the button should be hidden by default and only be displayed on hover. I wonder what in our setup prevents this from happening? Fixing whatever breaks this behaviour would be the best solution imo.

Otherwise, my personal preference would be option 3, because it shows that a button is there. While option 1 is what the extension is supposed to do, so I'm fine with that as well. Option 2 could be confusing, I think people might not find the button in this case.