I'm not sure this should be merged as this can hide text, though?

Thanks. I see.

This is an issue because we show the copy button always, with no opacity. It would probably no be an issue if the button was shown on hover only (like in gitbook())

This is a topic that we are still thinking about (#1040 and associated PR #1041).

Best is to deal with this PR when we will deal with the other.

Solution I put together with DevTools:

• Put the copy div right at the beginning of the pre node. (prepending instead of appending)
• CSS

pre .copy {
float: right;
margin-left: 1rem;
margin-bottom: 1rem;
}

FWIW, quarto as a smaller icon and deal with this by having a padding for the pre block, leaving space between the code part and pre background for the icon

pre.sourceCode.code-with-copy {
    padding-right: 25px;
}

This leave the code aligned the same way on the right side.

with gitbook() the icon is right above the text in the margin

@apreshill we should look into that in the same bundle as the copy button improvement, and uniformisation between outputs.

What are your thoughts on this ?

Hi @cderv looking into this right now. Also another point of comparison is GitHub's new copy icon UI:

apreshill/bs4booktesting#1

Looks like they actually do the scrolling underneath the button on hover.

I like the padding-right idea, but needed to add 60px to clear the button instead of 25px. Here is how that looks:
https://apreshill.github.io/bs4booktesting/

I wish the padding could be a bit more narrow.

For completeness, here is @maelle's tweak: if we keep the word "copy" I like this solution:

Using this space to think out loud here:

1. I'd like to keep the existing behavior of permanent copy button (no reveal just on hover). I think that makes sense for a book output, and is more friendly to readers who may not be programmers.
2. @hadley might you be open to switching to an icon here? That would decrease the padding needed. We could follow Quarto's lead and use the Bootstrap clipboard icon: https://icons.getbootstrap.com/icons/clipboard/ (maybe switching to this icon after click: https://icons.getbootstrap.com/icons/clipboard-check/). If you want to keep the word copy, we'll go with @maelle's solution.

I think it makes sense to match quarto here; I'm fine with the icon.

This branch is now tested in https://cderv.github.io/bs4booktesting/wrap-and-scroll/

and it's look like this

Current master looks like this: https://cderv.github.io/bs4booktesting/

So this PR:

• Wraps the content to not have scroll
• make the copy button not hide code by having the text be "around". For reference, the other solution would be a margin for the copy button in the code block : bs4_book: no scroll on x overflow and correct copy btn placement #1187 (comment)

@apreshill to discuss.