div overflow when enabled markup.highlight.lineNos and markup.highlight.lineNumbersInTable

[mchu1966]

Describe the problem:

When I enabled the markup.highlight.lineNos and markup.highlight.lineNumbersInTable in hugo.toml, the syntax highlighting code block will overflow when the content is too long that exceed the div width.

Steps to reproduce:

1. enable markup.highlight.lineNos and markup.highlight.lineNumbersInTable in hugo.toml

[markup.highlight]
lineNos = true
lineNumbersInTable = true

2. create a syntax highlighting code block with long enough content

Observed Results:

• What happened?

if I turn the lineNumbersInTable to false, the overflowed part will be hidden.

• What did you expect to happen?

The code block should hide the overflowed element, and able to be scrolled horizontally to view the content.

I added a workaround to _base.scss, to get my expecting result

.highlight {
  div,
  pre {
    margin: 2rem 0 2rem;
    padding: 1rem;
    border-radius: 1rem;
    overflow: auto; // <- add this
  }
}

I'm not sure if it will cause any breaking changes, or anywhere else needed to be updated in order to fix it, so open a issue. Thanks for helping.

Relevant code exceptions or logs

N/A