Make code blocks scrollable instead of being wrapped

[WarningImHack3r]

What is the issue?

When browsing PRs or issues with the built-in PR/issue viewer (by clicking Open details on the home page next to a changelog item), you can enjoy beautifully rendered code blocks (thanks to Shiki).

The problem is that the code currently wraps on small screens with long code lines. It makes the thing responsive, but that's not really what we want to experience: making the code block scrollable on overflow is already much better.

Current behavior	Without text-wrap

What are the steps to reproduce this issue?

1. Visit this page locally: http://localhost:5173/pull/sveltejs/svelte/12425 (or any other PR/issue you could find with a decently large code block)
2. Use the dev tools or a small screen to make the code too small for its container

Unsuccessful attempt: (good starting point)

1. Open src/lib/components/MarkdownRenderer.svelte
2. Change the <svelte:element> to the following:

   -<!-- TODO: actually figure out how to overflow-x-auto the code blocks -->
   <svelte:element
   	this={inline ? "span" : "div"}
   	class={cn(
   -		"prose dark:prose-invert prose-a:no-underline prose-a:underline-offset-4 prose-a:[overflow-wrap:_anywhere] hover:prose-a:underline prose-code:[overflow-wrap:_anywhere] prose-li:my-1",
   +		"prose dark:prose-invert prose-a:no-underline prose-a:underline-offset-4 prose-a:[overflow-wrap:_anywhere] hover:prose-a:underline prose-code:[overflow-wrap:_anywhere] prose-pre:max-w-96 prose-li:my-1",
   -		"prose-pre:text-wrap", // remove with TODO
   		inline && "*:inline",
   		className
   	)}
   >

3. It works, but the max width here is hardcoded: I want it to be dynamic. Currently, without text wrapping, the code block never wraps/shrinks, pushing the page elements on the right (the Info column) to overflow from the page
   
4. Tip: I think the key answer resides in PageRenderer, not in MarkdownRenderer. Harcoding a width does the trick (like md:max-w-3/5), but it does not look exactly the same overall as it used to be.

What were you expecting to happen?

A scroll bar should appear once the code doesn't fit anymore instead of wrapping the code, and the code block should always be the same width as its container.

Paste any relevant logs, error output, etc.

No response

What OS are you experiencing the problem on?

Not applicable

Additional platform information

No response

Duplicates

• I have checked that my problem has not already been mentioned recently in an existing issue