Fix code block overflow and scrollbar on mobile (#313)

simonhamp · claude · web-flow · commit 02d34b045423 · 2026-03-29T21:44:06.000+01:00
- Add overflow-hidden and rounded-md to torchlight-with-copy wrapper so
  background and border radius stay in view while content scrolls
- Add min-w-0 to blog article prose container to constrain code blocks
- Style scrollbar transparent by default, show subtle thumb on hover
- Remove md: breakpoint from wrapper rounding so it applies on all screens

Co-authored-by: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/app/Extensions/TorchlightWithCopyExtension.php b/app/Extensions/TorchlightWithCopyExtension.php
@@ -13,7 +13,7 @@ public function defaultBlockRenderer()
             $torchlight = parent::defaultBlockRenderer();
 
             return <<<HTML
-                <div x-data="codeBlock" class="torchlight-with-copy relative md:rounded-md">
+                <div x-data="codeBlock" class="torchlight-with-copy relative">
                     <div class="flex space-x items-center absolute top-0 right-0">
                         <div x-show="showMessage" x-transition class="py-1 transition duration-300 text-indigo-400 font-bold">Copied!</div>
                         <button
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -304,6 +304,49 @@ nav.docs-navigation li:has(.third-tier .exact-active) > .subsection-header {
     @apply mr-4;
 }
 
+/*
+ The wrapper handles the visual container (border radius,
+ overflow clipping) so code blocks don't break out of their
+ rounded corners on mobile. The pre inside handles scrolling.
+*/
+.torchlight-with-copy {
+    @apply my-4 overflow-hidden rounded-md;
+}
+
+.prose .torchlight-with-copy pre {
+    @apply my-0;
+}
+
+/*
+ Transparent scrollbar that fades in on hover.
+*/
+.torchlight-with-copy pre {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.torchlight-with-copy pre:hover {
+    scrollbar-color: rgb(255 255 255 / 0.3) transparent;
+}
+
+.torchlight-with-copy pre::-webkit-scrollbar {
+    height: 6px;
+}
+
+.torchlight-with-copy pre::-webkit-scrollbar-track,
+.torchlight-with-copy pre::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+.torchlight-with-copy pre::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 3px;
+}
+
+.torchlight-with-copy pre:hover::-webkit-scrollbar-thumb {
+    background: rgb(255 255 255 / 0.2);
+}
+
 /*
  Prose dark mode
 */
diff --git a/resources/views/article.blade.php b/resources/views/article.blade.php
@@ -92,7 +92,7 @@ class="text-sm"
                         })
                     }
                 "
-                class="prose max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"
+                class="prose min-w-0 max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"
                 aria-labelledby="article-title"
             >
                 {!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}

Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ class="text-sm"`
`92`	`92`	`})`
`93`	`93`	`}`
`94`	`94`	`"`
`95`		`- class="prose max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"`
	`95`	`+ class="prose min-w-0 max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"`
`96`	`96`	`aria-labelledby="article-title"`
`97`	`97`	`>`
`98`	`98`	`{!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}`