fix(docs): prevent code block overflow on installation page - #27
Open
sloweyyy wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for helpful-alpaca-646002 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
sloweyyy
force-pushed
the
fix/docs-code-block-overflow
branch
from
June 1, 2026 06:50
b2c0dbd to
4255a7b
Compare
The installation page relied on `prose-pre`/`prose-code` Tailwind classes, but the `@tailwindcss/typography` plugin is not installed, so code blocks rendered unstyled with no horizontal scrolling. Long install URLs pushed the page wider than the viewport, causing horizontal overflow. Add explicit `pre`/`code` renderers to ReactMarkdown using the same light code-block style as the rest of the docs (CLI reference): `bg-gray-100 p-4 rounded-lg overflow-x-auto`. Long lines now scroll inside the code block instead of expanding the page. Signed-off-by: Truong Le Vinh Phuc <37492460+sloweyyy@users.noreply.github.com>
sloweyyy
force-pushed
the
fix/docs-code-block-overflow
branch
from
June 1, 2026 06:56
4255a7b to
00bb582
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The installation page (
/docs/getting-started/installation) had a horizontal overflow issue: long install URLs and commands pushed the page wider than the viewport.The root cause is that the page relies on
prose-pre/prose-codeTailwind classes from@tailwindcss/typography, but that plugin is not installed (plugins: []intailwind.config.js). As a result, code blocks rendered completely unstyled with no horizontal scrolling, so long lines expanded the page.Fix
Added explicit
pre/coderenderers to theReactMarkdowninstance inInstallation.tsx, using the same light code-block style already used across the rest of the docs (e.g. the CLI reference page):bg-gray-100 p-4 rounded-lg overflow-x-auto.Long lines now scroll inside the code block instead of expanding the page.
Before
After
Verification