Code annotation with hover renders opaque sidebar that obscures code with horizontal scrolling, does not highlight full code block when rendered to HTML

[tylermorganwall]

Bug description

The code annotation element (when code-annotations: hover) obscures the underlying code when the underlying code is wide. Additionally, the highlight only covers the original area and not the code that needs to be scrolled to see.

Steps to reproduce

---
title: "Opaque Annotation Bar Stays in Place for Wide Code Blocks"
code-annotations: hover
---

```{r}
test = 1 # <1>
testtest = 1 # <1>
testtesttesttest = 1 # <1>
testtesttesttesttesttesttesttest = 1 # <1>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttest = 1 # <1>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestHEREtesttesttesttesttesttesttesttesttesttest = 1 # <1>

1. Test

   
   ### Expected behavior

I would expect the code annotation gutter to be fixed to the side of the block as it scrolls horizontally. Additionally, I would expect the semi-transparent code overlay to extend all the way to the end of the block when the user has scrolled horizontally, rather than ending in the middle of the block. Additionally, if the code annotation gutter is opaque, I would expect to be able to scroll to reveal the underlying code.

Actual behavior

The bar is fixed in place as it scrolls, covering up code in the block. The semi-transparent code overlay ends in the middle of the block when the code is wide enough to require scrolling.

See below screenshot:

Your environment

• IDE: RStudio 2023.09.1+494
• Quarto 1.3.450

Quarto check output

[✓] Checking versions of quarto binary dependencies... Pandoc version 3.1.1: OK Dart Sass version 1.55.0: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.3.450 Path: /Applications/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK Version: 3.10.8 Path: /opt/homebrew/opt/python@3.10/bin/python3.10 Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK Version: 4.3.1 Path: /Library/Frameworks/R.framework/Resources LibPaths:

• /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library knitr: 1.43 rmarkdown: 2.24

[✓] Checking Knitr engine render......OK

[cderv]

[✓] Checking versions of quarto binary dependencies... Pandoc version 3.1.1: OK

Can you try with latest pre-release 1.4 ? I believe this has been fixed already

[cderv]

Oh nevermind. I see it now, this is because there is the slider and the hover background does no cover what is after... 🤔

Thanks for the report!