code-annotations gutter hides part of large content in code block

[mcanouil]

Description

When using code-annotations the gutter in which the marker is added can hide the content if it's larger than the width (horizontal scrolling).

---
format: html
code-annotations: below
---

## Portrait Page

```{.bash filename="Bash"}
echo "Hello, World!" #<1>
echo "This is a very long line that will not fit on a single line in the document. It should wrap around to the next line automatically, demonstrating how text wrapping works in a Word document generated from Quarto." > long_text.txt #<1>
```

1. The command above creates a text file with a long line of text that will wrap in the HTML document.

Of course, you can workaround this with code-overflow: wrap but that's not the default.

---
format: html
code-annotations: below
code-overflow: wrap
---

## Portrait Page

```{.bash filename="Bash"}
echo "Hello, World!" #<1>
echo "This is a very long line that will not fit on a single line in the document. It should wrap around to the next line automatically, demonstrating how text wrapping works in a Word document generated from Quarto." > long_text.txt #<1>
```

1. The command above creates a text file with a long line of text that will wrap in the HTML document.

no wrap	wrap

Result is a bit different for Reveal.js as there is no gutter.

[mcanouil]

Maybe the same fix as for the copy-button should be applied to the code-annotation markers?

• html - fix code-copy style (#5538) #12787

[cderv]

Do you want to try it ?

[mcanouil]

Not sure how to apply the same trick as the code-annotation CSS is not that simple.

[mcanouil]

cc. @gadenbuie in case you know the trick here.

[mcanouil]

• Code annotation marker is masking content #13449