line break toggle covers code block content

[n1ru4l]

line break toggle covers code block content

[dimaMachina]

I remember you already submitted similar issue in v2.
In v3 I

• moved copy code button in code block title
• removed blured background
• added transparent bg instead, similar how to docusaurus does

What’s your proposition to fix?

[n1ru4l]

Possible options are

• hide completely
• collapse both buttons into an expandable context/dropdown menu

[dimaMachina]

hide completely

disagree, useful feature, especially on mobile

collapse both buttons into an expandable context/dropdown menu

I think it's too overcomplicated for only 2 actions

---

As an another idea we can do approach similar as GitHub do but we'll lose some 44px for code-block content

[n1ru4l]

I rarely use the copy and line-break toggle on my phone, so I disagree that a context menu would be too complicated.

How often do people copy a code snippet on mobile, for me it makes most sense on a desktop where you want to run the example? It might be an acceptable trade-off to hide that button and only display the line break toggle.

The code area is already quite small due to all the vertical spacings, so the latter seems suboptimal.

Reducing the size of the buttons in the header and placing them next to each other could also be a possibility.

[dimaMachina]

How often do people copy a code snippet on mobile, for me it makes most sense on a desktop where you want to run the example? It might be an acceptable trade-off to hide that button and only display the line break toggle.

this is true, we already show Word wrap button only on mobile, so we can hide Copy button from mobile and put Word wrap there

Will be more minimalistic too for mobile devices

The code area is already quite small due to all the vertical spacings, so the latter seems suboptimal.

true too

Reducing the size of the buttons in the header and placing them next to each other could also be a possibility.

We can try to see how it looks like, but I would stay with putting word wrap button on copy button place

Accepted to be fixed in Nextra directly!

[dimaMachina]

@n1ru4l I've just thought that github approach will be perfect since if code block doesn't contain filename, copy code button will be in code block and not in its filename (and covering issue will still persist), so we can leave copy-code for mobile for now (since github has it on mobile too)