Skip to content

Fix code block overflow - #2802

Merged
Simek merged 2 commits into
react-native-community:mainfrom
cornejobarraza:fix/pre-overflow
Sep 11, 2026
Merged

Fix code block overflow#2802
Simek merged 2 commits into
react-native-community:mainfrom
cornejobarraza:fix/pre-overflow

Conversation

@cornejobarraza

Copy link
Copy Markdown
Contributor

📝 Why & how

Code block content overflows when longer text is rendered, mostly on mobile.

This is fixed by setting <pre> horizontal overflow to auto:

Before After
code_before code_after

✅ Checklist

  • Documented how you found or replicated the issue.
  • Explained how you fixed the issue or built the feature.

@Simek

Simek commented Sep 11, 2026

Copy link
Copy Markdown
Member

Nice catch, can you also make sure scrollbar uses correct colors in dark mode? There should be styles you need to apply in global.css IIRC.

Screenshot 2026-09-11 200121

@cornejobarraza

Copy link
Copy Markdown
Contributor Author

Missed that, thank you. Just pushed it, this is the code block now:

Light Dark
scrollbar_light scrollbar_dark

@Simek Simek left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix! 👍

@Simek
Simek merged commit 7905af6 into react-native-community:main Sep 11, 2026
2 checks passed
@cornejobarraza
cornejobarraza deleted the fix/pre-overflow branch September 11, 2026 18:25
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.

2 participants