fix(scss): code annotation line highlight overflow by mcanouil · Pull Request #13429 · quarto-dev/quarto-cli

mcanouil · 2025-09-26T09:42:49Z

Description

Since v1.8.15, selecting a code annotation draws a highlight band that spills out to the left of the code block and sits above the gutter band.

The script placed the bands from offsetTop, which is relative to the code element, but each band is positioned against a different containing block.
In dashboards the band sat about 20 px too high.
In Reveal.js a negative margin pushed it off the slide.

Both bands are now placed from the line positions, converted to the CSS pixels of their own container, since Reveal.js scales slides.
The band spans the code block, line numbers included, even with code-copy: false.

Format	Before	After
`html`
`dashboard`
`revealjs`

New Playwright tests measure the bands against the code block and the annotated lines in html, dashboard and revealjs, with and without line numbers.
They fail on main and pass in Chromium, Firefox and WebKit.

One gap remains.
In the light arrow theme the band tint lowers the contrast of .im tokens to 4.24:1.
This predates the change and is related to #14959, so the light-theme axe test is skipped with a note.

Closes #13448

Checklist

I have (if applicable):

referenced the GitHub issue this PR closes
updated the appropriate changelog in the PR
ensured the present test suite passes
added new tests
created a separate documentation PR in Quarto's website repo and linked it to this PR

AI-assisted PR

AI tool used: Claude Code
Codebase grounding: local clone
Human review: I have reviewed, tested, and verified the AI-generated content before submitting.

Note: autonomous AI agents submitting PRs without human oversight are not permitted — see the Code of Conduct.

posit-snyk-bot · 2025-09-26T09:43:09Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

quarto-dev/quarto-cli#13429

cscheid · 2025-09-26T13:40:33Z

This is a CSS change. CSS changes are scary, and we need stronger assurances of the before-after behavior; we don't have good regression protection here.

Have you tested the following?

website with no sidebars
dashboards

cscheid · 2025-09-26T15:25:40Z

Thanks for the screenshots! They are very encouraging.

I think this change is because of the change of the DOM for the copy button.

If that's the case, then we should be treating this as a regression, and hotfix 1.8. Do I understand this right?

cderv · 2025-09-26T16:44:42Z

So basically the change is removing these rules

  margin-left: -4em;
  width: calc(100% + 4em);

and using the same as the #code-annotation-line-highlight-gutter

It looks scary to have this impact, and it raises a question for me about the underlying DOM change—as if gutter was not useful anymore.

Also I am seeing those rules are set in revealjs too... Is it impacted too?

quarto-cli/src/resources/formats/revealjs/quarto.scss

Lines 772 to 787 in 9272aaa

    
           .reveal #code-annotation-line-highlight-gutter { 
        
             width: 100%; 
        
             border-top: solid var(--quarto-hl-co-color) 1px; 
        
             border-bottom: solid var(--quarto-hl-co-color) 1px; 
        
             z-index: 2; 
        
           } 
        
           .reveal #code-annotation-line-highlight { 
        
             margin-left: -8em; 
        
             width: calc(100% + 4em); 
        
             border-top: solid var(--quarto-hl-co-color) 1px; 
        
             border-bottom: solid var(--quarto-hl-co-color) 1px; 
        
             z-index: 2; 
        
             margin-bottom: -2px; 
        
           }

is this the change with the scafold for code copy button that impact this?

Sorry for all those question - this just warns in my head when I see CSS fix only - always wondered if we missed something in our after body processing that does post process in client or in our HTML post processor... hard to know... 🤔

cscheid · 2025-09-26T17:52:38Z

I think an in-depth follow up on the copy-button change is really needed as many things are not right now regarding code blocks/cells.

Let's do our best to be concrete here: "many things" and "not right" are not helpful terms to get us from here to there.

quarto-dev/quarto-cli#13429 quarto-dev/quarto-cli#13448

The band and the gutter band were placed from offsetTop, which is relative to the code element, but each band is positioned against another containing block. In dashboards the band sat above its lines, and in Reveal.js a negative margin pushed it out of the slide.

… the copy button

cderv

Thanks for reworking this!

I'll push a small adjustment before merging, so no need to push on your side meanwhile.

…ghlight The band is placed from client rects relative to its offsetParent. When that offsetParent is a positioned element that scrolls, which happens with code-copy: false, the rect difference already includes the scroll, and setting it as an absolute offset applies it a second time, so the band sat above its lines by the scroll offset. Adding the container's scrollTop and scrollLeft places it back on the lines. A new Playwright case selects an annotation inside a scrolled positioned box. The light theme contrast test switches from test.fixme to test.fail so it keeps running and flags when the arrow theme contrast gap (quarto-dev#14959) is resolved, as the Playwright test conventions ask for known failures.

Reveal.js turns code-line-numbers on by default, so the slide meant to cover code without line numbers rendered numbered code too, and both slides exercised the same layout. Setting code-line-numbers="false" on that block restores the unnumbered case.

The Reveal.js slide meant for unnumbered code rendered numbered code, because Reveal.js turns code-line-numbers on by default, and the band geometry checks pass either way. Each case now checks whether its code block carries number-lines before measuring, so a fixture that drifts from its label fails instead of silently covering the wrong layout.

mcanouil self-assigned this Sep 26, 2025

mcanouil marked this pull request as ready for review September 26, 2025 09:47

mcanouil added a commit to mcanouil/quarto-mcanouil that referenced this pull request Sep 26, 2025

fix: code-annotation line highlight

7983abb

quarto-dev/quarto-cli#13429

mcanouil changed the title ~~fix: code annotation line highlight overflow~~ fix(scss): code annotation line highlight overflow Sep 26, 2025

This comment has been minimized.

Sign in to view

mcanouil mentioned this pull request Sep 26, 2025

Code annotation line highlight overflow and gutter miss-alignment #13448

Closed

mcanouil added a commit to mcanouil/quarto-mcanouil that referenced this pull request Sep 26, 2025

fix: overload code annotations gutters CSS rules

d040152

quarto-dev/quarto-cli#13429 quarto-dev/quarto-cli#13448

mcanouil marked this pull request as draft January 15, 2026 11:59

cscheid added this to the v1.10 milestone Feb 17, 2026

mcanouil modified the milestones: v1.10, v1.11 Jul 30, 2026

mcanouil mentioned this pull request Oct 23, 2026

Track the Quarto workarounds in the theme mcanouil/mickael.canouil.fr#404

Open

30 tasks

mcanouil force-pushed the fix/code-annotation-highlight-overflow branch from f818af8 to 97d09d6 Compare October 26, 2026 16:14

mcanouil marked this pull request as ready for review October 26, 2026 16:14

mcanouil mentioned this pull request Oct 26, 2026

Revealjs line highlighting cannot meet WCAG contrast #14959

Open

mcanouil added 3 commits October 26, 2026 17:34

fix: avoid code-annnotation-line-highlight overflow

d91555e

test: cover code annotation highlight placement and contrast

922c9db

mcanouil added 3 commits October 26, 2026 17:34

docs: add changelog entry for the code annotation highlight fix

44bdb03

fix: keep the code annotation highlight inside the code block without…

b3248c8

… the copy button

fix: skip placing the annotation highlight when its container is hidden

b72c021

mcanouil force-pushed the fix/code-annotation-highlight-overflow branch from 97d09d6 to b72c021 Compare October 26, 2026 16:35

cderv approved these changes Oct 28, 2026

View reviewed changes

cderv added 3 commits October 28, 2026 12:28

cderv merged commit 364ee3b into quarto-dev:main Oct 28, 2026
52 checks passed

mcanouil deleted the fix/code-annotation-highlight-overflow branch October 28, 2026 13:33

Navigation Menu

Repository navigation

fix(scss): code annotation line highlight overflow - #13429

fix(scss): code annotation line highlight overflow#13429
cderv merged 9 commits into
quarto-dev:mainfrom
mcanouil:fix/code-annotation-highlight-overflow

mcanouil commented Sep 26, 2025 •

edited

Loading

Uh oh!

posit-snyk-bot commented Sep 26, 2025 •

edited

Loading

Uh oh!

cscheid commented Sep 26, 2025

Uh oh!

This comment has been minimized.

cscheid commented Sep 26, 2025

Uh oh!

This comment has been minimized.

This comment has been minimized.

cderv commented Sep 26, 2025 •

edited

Loading

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

cscheid commented Sep 26, 2025

Uh oh!

This comment has been minimized.

cderv left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mcanouil commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

posit-snyk-bot commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

cscheid commented Sep 26, 2025

Uh oh!

This comment has been minimized.

cscheid commented Sep 26, 2025

Uh oh!

This comment has been minimized.

This comment has been minimized.

cderv commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

cscheid commented Sep 26, 2025

Uh oh!

This comment has been minimized.

cderv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mcanouil commented Sep 26, 2025 •

edited

Loading

posit-snyk-bot commented Sep 26, 2025 •

edited

Loading

cderv commented Sep 26, 2025 •

edited

Loading