fix(scss): code annotation line highlight overflow

[mcanouil]

Adjust the CSS for code annotation line highlights to prevent overflow issues, ensuring proper display and alignment.

Before	After

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

[posit-snyk-bot]

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

Status	Scanner	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.

[cscheid]

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

[mcanouil]

I've seen the issue in single document HTML and Dashboard, after I discovered it in website/book.

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

Format	Before	After
Dashboard
HTML
Website

[cscheid]

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?

[mcanouil]

this as a regression, and hotfix 1.8. Do I understand this right?

Let me check if my guess is correct by testing on 1.7 first.

[mcanouil]

The line highlighting is working properly in 1.7, so that's indeed a regression.

[cderv]

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... 🤔

[mcanouil]

I have not seen any issue/changes in Reveal.js.

Note that the change in this PR is not the only one needed, look at the gutter below. there is a bump which was not there before in 1.7.

(The copy button also overlaps with annotations on the first line)

[mcanouil]

With 1.8, the CSS associated with the gutter is a bit weird.

The rules about the classes/ids don't seem to be needed anymore.

[mcanouil]

Removing the CSS rules for:

• #code-annotation-line-highlight-gutter
• .code-annotation-gutter-bg
• .code-annotation-gutter

The div of class code-annotation-gutter-bg also seems to no longer be of any use.
The other div is used as a placeholder for the JavaScript to insert the other div but I don't think it's useful now beside avoiding the script to crash.

Leads to a better display (no bump):

• website
  

• book
  

• html
  

• dashboard
  

[mcanouil]

If I remove all the "gutter" pieces, the brute-force way, including from the JavaScript script:

Screen.Recording.2025-09-26.at.19.26.39.mov

This breaks code-annotation for Reveal.js, so let's not do that without finesse.

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.

[cscheid]

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.

[mcanouil]

I can compile a list or what I'v seen and are clear visual regression that cannot possibly be considered as anything other than a bug.
The line highlighting overflowing is the worst but there are several cases (some are already reported) where the copy button is not placed where it should.

---

edit: the regression from 1.7 I remember how to reproduce:

• Code annotation line highlight overflow and gutter miss-alignment #13448 (partially fixed by this PR)
• Code-copy button outside of code blocks #13446
• Code-copy button overlaps with code-annotation marker #13444