search

rehype-pretty / rehype-pretty-code

Beautiful code blocks for Markdown or MDX.
https://rehype-pretty.pages.dev
MIT License
1.05k stars 64 forks source link

Issues with size/layout of code blocks in narrow viewports #147

Closed dbarnett closed 10 months ago

dbarnett commented 10 months ago

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

weird code block layout, clipping box too narrow and spilling text outside of it

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 commented 10 months ago

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;
}