Code annotations button overlapping with toggle line selection & copy to clipboard buttons

[georgeRobertson]

Context

No response

Bug description

Hi team,

When I have the following features enabled...

• "content.code.annotate",
• "content.code.copy",
• "content.code.select"

...the buttons overlap on long snippets of code making the code annotation button unreachable.

The only workaround I can find is to force newlines into the codeblock to force the code annotation to be underneath the copy to clipboard and toggle line selection buttons.

I thought adding the title to the code might place the copy code and enable line selectors inline with the title but this wasn't the case.

Related links

• Report a bug
• https://zensical.org/docs/authoring/code-blocks/#code-annotations

Reproduction

Here is a visual of the issue.

Here is an example of the code block + code annotation in the markdown file:

[codeblock_rpr.zip](https://github.com/user-attachments/files/25446926/codeblock_rpr.zip)

```sh
pip install git+https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.git@vMaj.Min.Pat # (1)!
```

1. Replace Major, Minor, Patch with the version of aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa that you want

A workaround is to add anything that forces new lines such as \n but obviously doesn't look great.

Steps to reproduce

1. Have code annotations enabled, copy code enabled and toggle line selection enabled
2. Add fenced codeblock to a markdown file with a rather long piece of code
3. Render through zensical serve and see how the buttons overlap

Browser

Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[georgeRobertson]

codeblock_rpr.zip

Sorry, thought I had added this but clearly not. Zip for reproduce.

[squidfunk]

Thanks for reporting. Hmm, do you have a good idea how things actually should work? Magically repositioning the code block copy and selection buttons would mean diverging behavior for a single code block based on its contents, which is probably quite confusing, so I'm wondering what the ideal UX should look here.

[squidfunk]

Moving to UI repository.

[georgeRobertson]

Hi @squidfunk, thank you for the response. Maybe having a protected margin on the right hand side of the code block for the line selector and the copy code? Something like this is what i'd imagine...

It could even switch to a vertical layout in multiline setups or maybe adding some code wrapping functionality to help deal with this as well? So, for lines that would overlap the "protected" margin, they would be placed onto a new line? Appreciate that would require potential changes to the line selector to ensure wrapped lines of code still refer to the original line they were written.

Another thing is that I could be just using the wrong functionality here, is there a better alternative to code annotations here? Maybe using the Admonitions here instead would be a cleaner and more informative?

Regardless, the "problem" will still exist where those buttons overlap the actual the code though (with or without the annotation).

[squidfunk]

Thanks for your input! We'll look into it. The extra margin solution sounds alike the simplest way to fix it.

[squidfunk]

Please provide a minimal reproduction as a zip file. The one attached does not work:
codeblock_rpr.zip

[squidfunk]

I'm puzzled, I tried the reproduction again, and it worked? Not sure what went wrong on my end. Fixed in 2d80c5c. If a code annotation is the last child of a line span, we now add right margin, so that the buttons don't overlay it.