Buttons still overlap code

[jyn514]

Same as #389 but with an example from https://doc.rust-lang.org/book/ch10-03-lifetime-syntax.html#generic-lifetimes-in-functions:

This screenshot was taken on iOS with Safari 13.

You can also reproduce by zooming to 200% on desktop (although I don't expect anyone's browsing the book that way):

[serverwentdown]

What about instead of #1508, we add padding-right when the screen is too small so that there is enough padding to scroll left and right.

[joshxyzhimself]

I think possible approach is move the code downward by 1 line? So buttons have their own line?

[vwkd]

Another idea is to do it like GitHub. Hide the buttons by default. Show them on hover (desktop) and on single tap (mobile). Also give them a background.

Desktop

Mobile

[ehuss]

I posted #1806 with a proposed fix.

I would appreciate if you could take a look and see if you have any thoughts. I posted a demo at https://ehuss.github.io/rust-book/. If you could look through some examples, try different browsers and platforms, different color themes, etc. If you have access to Android, that would particularly be nice to test since I don't have access to that.

[joshxyzhimself]

[joshxyzhimself]

[ehuss]

Here's an attempt where the buttons only show on hover: https://ehuss.github.io/rust-book/hover/

On mobile safari, hover can be triggered by just tapping the code block. I'm guessing mobile chrome does the same?

I like the idea of making the buttons only show on hover. I think the buttons are generally distracting and not something I interact with often. It also seems that having a "Copy" button only show on hover is a more common pattern (such as on GitHub).

That being said, I'm not super happy with how it looks. I am not a designer, but they feel a little clunky now. Any thoughts?

[jyn514]

On mobile safari, hover can be triggered by just tapping the code block. I'm guessing mobile chrome does the same?

mobile chrome is very bad about hover interactions, you usually have to tap and hold the block and the timing is hard to get right.