Skip to content

Fix code block overflow and scrollbar on mobile#313

Merged
simonhamp merged 1 commit intomainfrom
fix-codeblock-mobile-scroll
Mar 29, 2026
Merged

Fix code block overflow and scrollbar on mobile#313
simonhamp merged 1 commit intomainfrom
fix-codeblock-mobile-scroll

Conversation

@simonhamp
Copy link
Copy Markdown
Member

@simonhamp simonhamp commented Mar 29, 2026

Summary

  • Wraps Torchlight code blocks in an overflow-hidden rounded-md container so background and border-radius stay fully in view while only content scrolls horizontally
  • Adds min-w-0 to the blog article prose container so code blocks are properly constrained in the flex layout (matching docs and plugin pages)
  • Styles the scrollbar with a transparent track and a subtle thumb that only appears on hover, preventing it from occluding the rounded corners
  • Moves border-radius and margin styling to CSS (.torchlight-with-copy) so it also applies to pre-rendered plugin README HTML stored in the database

Test plan

  • View a docs page with code blocks on mobile — content should scroll horizontally within the code block container, with background and rounded corners fully visible
  • View a blog article with code blocks (e.g. /blog/nativephp-v31-the-biggest-performance-leap-yet) — code blocks should not cause the page to widen
  • Hover over a scrollable code block — a subtle scrollbar thumb should appear
  • Check plugin README pages with code blocks render correctly

🤖 Generated with Claude Code

- 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>
@simonhamp simonhamp marked this pull request as ready for review March 29, 2026 20:44
@simonhamp simonhamp merged commit 02d34b0 into main Mar 29, 2026
2 checks passed
@simonhamp simonhamp deleted the fix-codeblock-mobile-scroll branch March 29, 2026 20:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant