Symbols can cover up code on smartphones.

[Glitchy-Tozier]

• I have checked the latest main branch to see if this has already been fixed
• I have searched existing issues and pull requests for duplicates

URL to the section(s) of the book with this problem:
Any code-section with a long first line

Description of the problem:
Symbols such as run, Ferris or that eye-icon overlap with the code on mobile devices. This especially is a problem if the first line is the longest line, thus making it impossible to scoll all of it into view.

Suggested fix:
Add a button bar to the top of each code-section, that contains the necessary items.

Environment:
Device: Samsung Galaxy S9
Browser: Firefox

Screenshots:

[Glitchy-Tozier]

Another problematic example:

[chriskrycho]

Yeah, I have seen the same thing! I will try to comment (today or tomorrow) on the PR you opened, but very much appreciate it—it’s a real usability issue as things stand!

[wolfsprite]

I hope this is addressed soon, as I'm finding it makes a lot of code examples not fully readable on my phone.

[NeatNit]

I'm pretty sure I have the solution for this over at #4540 - please provide feedback!

[Glitchy-Tozier]

That sounds like it could work :)
One thing to note: The other symbols (copy & eye) also can conceil code, so they should be included in the fix.

[NeatNit]

One thing to note: The other symbols (copy & eye) also can conceil code, so they should be included in the fix.

As far as I can tell, they only appear if you tap the code box and disappear when you tap outside of it. In other words, this is already solved.

I'm guessing this was different back when this issue was opened, but today they don't get in the way.

Edit: demo:

Screen_Recording_20251028_133622_Firefox.mp4