I’m developing a blog using Next.js where I use rehype-pretty-code for syntax highlighting. I have a code block inside a demo blog post.

When I resize the window to check the responsiveness, the code block does not shrink below the length of the longest line of code, instead triggering a horizontal scrollbar across the entire page.

Expected Behavior

The code block should adjust its width with the viewport and introduce a scrollbar within the pre element itself when the content overflows.

Current Behavior

When resizing the window, the code block width remains fixed to the longest line of code (as shown below), leading to a full-page horizontal scrollbar when it exceeds the viewport width.

Technology Stack

• Next.js
• Tailwind CSS
• Next MDX
• rehype-pretty-code

Code

Here is the CSS related to the styling of the code block:

@layer components {
  .prose a {
    @apply text-primary underline decoration-primary underline-offset-2 transition-all hover:no-underline;
  }

  .prose .anchor {
    @apply invisible absolute right-4 top-1/2 w-full -translate-y-1/2 text-lg text-muted-foreground no-underline after:content-['#'];
  }

  .prose .anchor:hover {
    @apply visible no-underline;
  }

  .prose :where(h2, h3):hover > .anchor {
    @apply visible;
  }

  .prose h2 {
    @apply mb-4 mt-16 text-xl font-bold tracking-tight lg:text-2xl;
  }

  .prose h3 {
    @apply mb-4 text-lg font-bold tracking-tight lg:text-xl;
  }

  .prose :where(h2, h3) {
    scroll-margin-top: 80px;
    position: relative;
  }

  .prose p {
    @apply mb-8 leading-7 text-slate-700;
  }

  .prose p code {
    @apply text-sm;
  }

  .prose strong {
    @apply font-semibold;
  }

  .prose ul {
    @apply mb-8 list-disc pl-8 leading-7;
  }

  .prose ol {
    @apply mb-8 list-decimal pl-8 leading-7;
  }

  /* Code block */
  .prose figure {
    @apply mb-8 rounded-lg border shadow-sm;
  }

  /* Code block title */
  .prose figure figcaption {
    @apply border-b p-3 text-sm text-muted-foreground;
  }

  .prose figure pre {
    @apply relative overflow-x-auto py-4;
    counter-reset: line;
  }

  [data-line] {
    @apply border-l-2 border-l-transparent;
  }

  [data-line]::before {
    counter-increment: line; /* Increment counter for each line */
    content: counter(line); /* Display the counter value */
    display: inline-block; /* Make line numbers appear inline */
    width: 1rem; /* Adjust width as needed */
    margin-right: 1rem; /* Adjust spacing between numbers and code */
    margin-left: 1rem; /* Adjust spacing between numbers and code */
    text-align: right; /* Align numbers to the right */
    color: #a1a1aa; /* Set line number color (adjust if needed) */
  }

  [data-line-numbers-max-digits="2"] > [data-line]::before {
    width: 2rem; /* Adjust width for codes with max 2 digits */
  }

  [data-line-numbers-max-digits="3"] > [data-line]::before {
    width: 3rem; /* Adjust width for codes with max 3 digits */
  }

  .prose figure pre code {
    @apply text-sm;
  }

  [data-highlighted-line] {
    @apply border-l-2 border-blue-600 bg-blue-50;
  }
}

Attempts to Resolve

I’ve attempted to manage overflow with overflow-x-auto on the pre element, expecting it to contain the overflow within the code block itself, but the entire page still scrolls.

Code is open-source

The code of the Next.js project I am building is open source. Here are the links to relevant pages:

globals.css

https://github.com/sundaray/hemantasundaray/blob/main/styles/globals.css

The demo blog post (/app/blog/posts/first-post/page.mdx)

https://github.com/sundaray/hemantasundaray/blob/main/app/blog/(posts)/first-post/page.mdx