AlexsLemonade / AlexsLemonade/refinebio-examples
fix overflow text in code blocks
- Dominant language
- HTML
- Stars
- 11
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
When the browser window is very narrow, code blocks have code that extends to the right of the enclosing box. This looks fine until you try to scroll to the right, and then things get messy:

I assume this can be fixed in the CSS we provide, but with syntax coloring and all that, it got quickly past my abilities the last time I looked at it.
One potential option is to make the code wrap so the box never overflows to the right (this seems to be how output blocks are styled), but I'd rather not do that, personally. I'm willing to be overruled.
Contributor guide
Research direction
Reproduce the issue in a very narrow browser window and inspect the CSS that styles code blocks, comparing it with the output-block styling mentioned in the report. Done means code blocks no longer create messy rightward overflow when horizontally scrolled, while preserving syntax coloring and the preferred non-wrapping behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100