quarto-dev / quarto-dev/quarto-cli

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

Open
#8,025 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug code-annotation themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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:

Screenshot 2023-12-24 at 1 08 27 PM
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by rendering the supplied .qmd reproduction to HTML with code-annotations: hover, then inspect the code annotation gutter, overlay, and horizontal-scroll container. Done means the gutter does not obscure horizontally scrolled code, the overlay reaches the full wide block, and covered code can be revealed when scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.