[BUG] CodeBlock Language Selector overlaps long first line

[a3chron]

• [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [x] I have read the documentation and cannot find an answer.

Describe the bug I don't know if I am missing something obvious, as I think other would have this problem too, but I didn't find any issues related to it. When using the CodeBlock plugin, on long code pieces in the first line, the language selector & delete icon overlap the code, and there is not really a possibility to scroll etc to see the hidden code.

Reproduction Start from https://codesandbox.io/p/sandbox/mdx-editor-base-q8s7zr?file=/src/App.tsx to reproduce the problem so that I can observe the issue on my side and make sure that the fix reliably addresses it.

Reproduction: https://codesandbox.io/p/sandbox/mdx-editor-base-forked-w2ch2d

To Reproduce Steps to reproduce the behavior:

1. Go to basic mdx editor example (or my reproduction and just type in a long line of code)
2. Add code blocks to plugins
3. write some long code in the first line
4. Language select & delete icon are overlapping code, no way to see it

Expected behavior Maybe some option to hide/style the language selector box, or hide it per default in read only mode / only show on hover etc.

Screenshots

Desktop (please complete the following information):

• OS: Linux (Ubuntu)
• Browser: Firefox

[petyosi]

That's a valid (although not critical IMO) problem. I'm ok with hiding it in read-only mode, although the label for the code type can be useful for the user.

Happy to accept a PR for showToolbarOnHover, but this might be doable with CSS only?

[makcyd]

That's a valid (although not critical IMO) problem. I'm ok with hiding it in read-only mode, although the label for the code type can be useful for the user.

Happy to accept a PR for showToolbarOnHover, but this might be doable with CSS only?

We actually solved this issue by CSS and it looks as follows:

That's achieved with the similar code:

.#{$mdxeditor-editImageToolbar},
.#{$mdxeditor-codeMirrorToolbar} {
  visibility: hidden;
}

.#{$mdxeditor-codeMirrorWrapper} {
  overflow: visible !important;
}

.#{$mdxeditor-codeMirrorToolbar} {
  transform: translateY(calc(-100% - 1px));
}

.#{$mdxeditor-imageWrapper}:hover .#{$mdxeditor-editImageToolbar},
.#{$mdxeditor-codeMirrorWrapper}:hover .#{$mdxeditor-codeMirrorToolbar},
.#{$mdxeditor-codeMirrorWrapper}:focus-within .#{$mdxeditor-codeMirrorToolbar} {
  visibility: visible;
}