Issues with size/layout of code blocks in narrow viewports

[David Barnett]

I'm hitting some weird issues with how the size and/or layout of code blocks on mobile and narrow viewports:

I'd prefer to have the box go all the way to the edge of the text, and either to put a horizontal scrollbar on the code block or somehow force the container wider / code text smaller to make it fit. And in particular the glitch forcing extra margin space on the right vs. the left makes zero sense to me.

If you need to see it in context to diagnose, my repro is at https://mumind.me/posts/markdown-tailwind-struggles. It could just be user error with me doing something stupid in the surrounding layout but I'm having trouble making sense of what I might be doing wrong if so... I'm seeing this in Chrome on mobile and in the device toolbar of Chrome 120.0.6099.179 (Official Build) beta (64-bit).

[atomiks]

Code blocks don't have any styles (aside from the default grid), so they need to be applied by yourself. This is just native browser behavior

Most basic global styles that adds padding and prevents overflow:

pre {
  overflow-x: auto;
  padding: 1rem 0;
}

pre [data-line] {
  padding: 0 1rem;
}