fix: prevent horizontal overflow from long code blocks in skill pages #183
Conversation
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
- Add max-width: 100% to .file-list-body and .file-row - Prevents page-wide overflow when skills contain long code examples - Markdown pre blocks already have overflow-x: auto, but parent containers were expanding infinitely - Fixes issue where skills with 400+ char lines (e.g. browser automation commands) cause horizontal scrolling Affected: Skills with long inline code in markdown (browser act commands, etc.)
Contributor
|
@bewithgaurav is attempting to deploy a commit to the Amantus Machina Team on Vercel. A member of the Team first needs to authorize it. |
- Also ensures .file-list-body constraint is inherited properly - Prevents long code blocks from expanding file list container
- Add max-width: 100% to .markdown, .tab-body, .markdown pre - Ensures code blocks are constrained and show horizontal scrollbar - Prevents content from expanding parent containers beyond viewport
Adds overflow-x: auto to .skill-detail-stack, .tab-card, and .tab-body to ensure long code blocks are scrollable within the content area instead of causing page-wide horizontal overflow. Fixes horizontal overflow issue on skill pages with long code examples (e.g., browser automation commands with 400+ character lines). Tested on zepto skill page - page now stays within viewport (1200px) and code blocks are accessible via horizontal scrollbar in tab area.
bewithgaurav
changed the title
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
Skills with long code examples (400+ characters per line) cause horizontal page overflow, making the skill page ~5934px wide instead of staying within the viewport.
Affected skills: Skills with inline browser automation commands like:
Current behavior:
Root Cause
.markdown preelements already haveoverflow-x: auto(good!), but parent containers had no width constraints and expanded infinitely to fit content width.Solution
Added
max-width: 100%andoverflow-x: autoto parent containers:.skill-detail-stack.tab-card.tab-body.file-list.file-list-body.markdown.markdown preResult:
Testing
Verified on https://clawhub.com/skills/zepto which has 675-char lines in SKILL.md
Demo
Applied CSS fix live in browser, confirmed: