AlexsLemonade / AlexsLemonade/refinebio-examples

fix overflow text in code blocks

Open
#453 0 comments 0 reactions 0 assignees View on GitHub
dev help prettify
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:

Screen Shot 2021-03-11 at 9 30 55 AM

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.