Repository navigation
fix(web): contain wide code examples on API reference pages - #4621
Merged
Merged
Conversation
The API generator writes each function's examples as raw <pre><code> (renderExtended() in web/scripts/generate-api-docs.mjs), so Expressive Code never wraps them and its stylesheet, which is the only thing giving a <pre> overflow-x: auto on these sites, is never loaded on API pages. base.css only contains `.prose pre`, which API pages don't use, so a long example line widened the whole page at phone width (by about 441px on configuration/resources and over 5,000px on view-helpers/telfield). .sl-markdown-content pre now sets overflow-x: auto, so each example scrolls inside its own box. Guides code blocks already had the same value from Expressive Code and are unchanged. Fixes #4616 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Peter Amiri <peter@alurium.com>
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.
Summary
API reference examples are written by
generate-api-docs.mjs(renderExtended()) as raw<pre><code>, not as fenced code blocks. So:<pre>overflow-x: autoon these sites, never loads on API pages;base.cssonly contains.prose pre, which API pages don't use.A long example line therefore widened the whole page on phones. This adds
overflow-x: autoto.sl-markdown-content preinstarlight-theme.css, so each example scrolls inside its own box. No API content needs regenerating.Guides code blocks are Expressive Code and already had the same value, so they're unchanged.
Fixes #4616. Separate content bug, not fixed here: #4620 (literal
\nin two examples).Testing (built api + guides sites, 390×844 and 1440×900)
v4-2-0/configuration/resourcesv4-2-0/view-helpers/telfieldv4-2-0/model-class/deleteallv1-4-5/miscellaneous/deletebykey(<pre>without<code>)basics/associations: all 19 code blocks still scroll, with the copy button and frame intact and no double scrollbars.resourcesstill scrolls inside.wd-params-table.api.pngorguides.png.🤖 Generated with Claude Code