Highlight line cut off at phone width despite code line being scrollable

[jorge-sepulveda]

Good afternoon,

While troubleshooting the font size issue on code snippets, I noticed the highlight only extends up until the end of the line before you have to horizontally scroll.

Attached is a screenshot, I temporarily changed the color to red and I have a line highlighted in Dev Tools for additional context.

Analysis:

While looking at Safari Dev Tools on my local repo, I see a couple of things controlling the highlights:

assets/css/code.css

.highlight {
  position: relative;
  margin: 20px 0;
  border: 1px solid var(--code-border);
}

.highlight pre {
  border: none;
}

assets/css/syntax.css

/* LineHighlight */ .chroma .hl { background-color:color-mix(in srgb, var(--foreground) 5%, transparent) !important}

I know I'm missing a few more things. For the highlight css, I added width: inline-block which highlights the whole line but it doesn't respect the container as you have to horizontally scroll the page instead of the code block.

I'm sure it's a simple CSS issue, just gotta hunt it down a little further. Any ideas on where to look would be greatly appreciated!