fix: extend code block background when scrolling horizontally

[dbrennand]

Summary

• Adds min-width: 100%; width: max-content to .highlight pre and .code pre
• Fixes the code block background not extending when scrolling horizontally on narrow viewports
• Ensures the background also fills the full container width when content is short

Problem

On small screens, when a code block contains a line longer than the viewport width, Hugo's chroma highlighter sets a background color on the <pre> element. With overflow-x: auto on .highlight, the scrollable area is created — but the <pre> only fills the visible container width. Scrolling right reveals text on a transparent/white background.

Fix

.highlight pre,
.code pre {
  min-width: 100%;
  width: max-content;
}

min-width: 100% ensures the <pre> always fills the container for short content. width: max-content allows it to grow beyond the container for long lines. The browser resolves to max(min-width, width), handling both cases correctly.

🤖 Generated with Claude Code

[dbrennand]

Here is an example from my blog where I saw this issue:

These CSS changes fix this issue.

[Copilot]

Pull request overview

This PR adjusts the theme’s code block CSS so the syntax-highlighted <pre> element expands to the full scrollable width, ensuring the background color from Hugo/Chroma remains visible when horizontally scrolling on narrow viewports.

Changes:

• Add min-width: 100% and width: max-content to .highlight pre and .code pre to keep code block backgrounds covering both short and long content while allowing horizontal overflow scrolling.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[janraasch]

Hi @dbrennand, nice to meet you. Thanks so much for the pr 🤝. Very good description!!!

One question: Could you point me to the blog post where you exhibited this issue or provide a code block for me to reproduce the issue on the example site?

Thank you 👋

[dbrennand]

Hi @dbrennand, nice to meet you. Thanks so much for the pr 🤝. Very good description!!!

One question: Could you point me to the blog post where you exhibited this issue or provide a code block for me to reproduce the issue on the example site?

Thank you 👋

https://dbren.uk/blog/powershell-storing-credentials/

The first code block.

[janraasch]

Hi @dbrennand, nice to meet you (again) 😄. I see you also worked on #126 — awesome to see you back! Thank you for your help ❤️.

Great description on this one, too!!!

Some context / history for anyone following along:

This all stems from us relying on Hugo's rendering of CSS for code blocks (see Hugo docs on Syntax Highlighting.

1. In #49 we added overflow-x: auto to handle long code lines spilling off-screen. This is exact issue 😅.
2. In #126 we removed our custom color and background-color styles from code and .highlight — so people could easily customize their highlight theme in hugo.toml without us interfering.
3. But that introduced this gap (back): when scrolling horizontally, the <pre> background (set by Hugo's Chroma inline styles) doesn't extend, leaving a transparent/white area.

Why this fix works:

width: max-content lets <pre> grow for long lines. min-width: 100% ensures the <pre> still fills the container for short content. The browser resolves to max(min-width, width), covering both cases. Simple and clean 👌.

Alternative considered:

Another approach would have been to use Hugo's CSS class mode (noClasses = false) and then add the background-color from <pre> to .highlight ourselves. But that'd make using this theme just a tidbit too complicated, since users would need to run hugo gen chromastyles to generate a stylesheet and then add this to their page. So we're not going that route.

➡️ With this we start to interfere a little bit again with Hugo's highlight styling, but I think it's a good trade-off. Let's see how it goes 🤝.

Merging this puppy — thank you @dbrennand 🙏!