Skip to content

Commit 02d34b0

Browse files
simonhampclaude
andauthored
Fix code block overflow and scrollbar on mobile (#313)
- 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 <noreply@anthropic.com>
1 parent 2ca28ed commit 02d34b0

File tree

3 files changed

+45
-2
lines changed

3 files changed

+45
-2
lines changed

app/Extensions/TorchlightWithCopyExtension.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ public function defaultBlockRenderer()
1313
$torchlight = parent::defaultBlockRenderer();
1414

1515
return <<<HTML
16-
<div x-data="codeBlock" class="torchlight-with-copy relative md:rounded-md">
16+
<div x-data="codeBlock" class="torchlight-with-copy relative">
1717
<div class="flex space-x items-center absolute top-0 right-0">
1818
<div x-show="showMessage" x-transition class="py-1 transition duration-300 text-indigo-400 font-bold">Copied!</div>
1919
<button

resources/css/app.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,49 @@ nav.docs-navigation li:has(.third-tier .exact-active) > .subsection-header {
304304
@apply mr-4;
305305
}
306306

307+
/*
308+
The wrapper handles the visual container (border radius,
309+
overflow clipping) so code blocks don't break out of their
310+
rounded corners on mobile. The pre inside handles scrolling.
311+
*/
312+
.torchlight-with-copy {
313+
@apply my-4 overflow-hidden rounded-md;
314+
}
315+
316+
.prose .torchlight-with-copy pre {
317+
@apply my-0;
318+
}
319+
320+
/*
321+
Transparent scrollbar that fades in on hover.
322+
*/
323+
.torchlight-with-copy pre {
324+
scrollbar-width: thin;
325+
scrollbar-color: transparent transparent;
326+
}
327+
328+
.torchlight-with-copy pre:hover {
329+
scrollbar-color: rgb(255 255 255 / 0.3) transparent;
330+
}
331+
332+
.torchlight-with-copy pre::-webkit-scrollbar {
333+
height: 6px;
334+
}
335+
336+
.torchlight-with-copy pre::-webkit-scrollbar-track,
337+
.torchlight-with-copy pre::-webkit-scrollbar-corner {
338+
background: transparent;
339+
}
340+
341+
.torchlight-with-copy pre::-webkit-scrollbar-thumb {
342+
background: transparent;
343+
border-radius: 3px;
344+
}
345+
346+
.torchlight-with-copy pre:hover::-webkit-scrollbar-thumb {
347+
background: rgb(255 255 255 / 0.2);
348+
}
349+
307350
/*
308351
Prose dark mode
309352
*/

resources/views/article.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ class="text-sm"
9292
})
9393
}
9494
"
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"
9696
aria-labelledby="article-title"
9797
>
9898
{!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}

0 commit comments

Comments
 (0)