openclaw/clawhub
1
0
Fork 0
mirror of https://github.com/openclaw/clawhub.git synced 2026-07-22 03:35:29 -04:00
Code Issues 183 Packages Projects Releases 1 Wiki Activity

[PR #183] [MERGED] fix: prevent horizontal overflow from long code blocks in skill pages #288

New Issue
Closed
opened 2026-02-15 17:16:41 -05:00 by yindo · 0 comments
yindo commented 2026-02-15 17:16:41 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/openclaw/clawhub/pull/183
Author: @bewithgaurav
Created: 2/8/2026
Status: ✅ Merged
Merged: 2/12/2026
Merged by: @steipete

Base: main ← Head: fix/code-block-overflow

📝 Commits (6)

  • f9d8c46 Fix: Prevent horizontal overflow from long code blocks in skill pages
  • 65c14bb fix: add max-width to .file-list container to prevent overflow
  • 4b9c48e fix: add max-width to all markdown containers and pre tags
  • 06b62db fix: add overflow-x to parent containers for horizontal scroll
  • 15d5c77 docs: note code-block overflow fix in changelog (#183) (thanks @bewithgaurav)
  • 69a78b9 Merge remote-tracking branch 'origin/main' into landpr-183-ff

📊 Changes

2 files changed (+12 additions, -1 deletions)

View changed files

📝 CHANGELOG.md (+1 -1)
📝 src/styles.css (+11 -0)

📄 Description

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:

browser act profile=openclaw request='{"fn":"() => { /* very long JS */ }", "kind":"evaluate"}'

Current behavior:

  • Page becomes ~5934px wide
  • Horizontal scrolling required at page level
  • UI feels "wobbly"

Root Cause

.markdown pre elements already have overflow-x: auto (good!), but parent containers had no width constraints and expanded infinitely to fit content width.

Solution

Added max-width: 100% and overflow-x: auto to parent containers:

  • .skill-detail-stack
  • .tab-card
  • .tab-body
  • .file-list
  • .file-list-body
  • .markdown
  • .markdown pre

Result:

  • ✅ Page stays within viewport width (1200px)
  • ✅ Code blocks scroll horizontally within tab content area
  • ✅ No visual changes to properly-sized content

Testing

Verified on https://clawhub.com/skills/zepto which has 675-char lines in SKILL.md

  • Before: Page width 5934px
  • After: Page width 1200px, scrollbar appears in tab content area

Demo

Applied CSS fix live in browser, confirmed:

  • Document width: 1200px (fixed! ✅)
  • Tab body has horizontal scrollbar
  • Code blocks fully accessible via scroll

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/openclaw/clawhub/pull/183 **Author:** [@bewithgaurav](https://github.com/bewithgaurav) **Created:** 2/8/2026 **Status:** ✅ Merged **Merged:** 2/12/2026 **Merged by:** [@steipete](https://github.com/steipete) **Base:** `main` ← **Head:** `fix/code-block-overflow` --- ### 📝 Commits (6) - [`f9d8c46`](https://github.com/openclaw/clawhub/commit/f9d8c46ac3cdaf56dc6cd4298e41503184110d11) Fix: Prevent horizontal overflow from long code blocks in skill pages - [`65c14bb`](https://github.com/openclaw/clawhub/commit/65c14bbc552a7bb2fd6330eae7d1253dc01a64af) fix: add max-width to .file-list container to prevent overflow - [`4b9c48e`](https://github.com/openclaw/clawhub/commit/4b9c48e229dd837e82e893d8071f89b185a4161b) fix: add max-width to all markdown containers and pre tags - [`06b62db`](https://github.com/openclaw/clawhub/commit/06b62dbecf47b51647320c9d97ce01a8572ba871) fix: add overflow-x to parent containers for horizontal scroll - [`15d5c77`](https://github.com/openclaw/clawhub/commit/15d5c772f7a8de6779b47f446959a1b87f09c85e) docs: note code-block overflow fix in changelog (#183) (thanks @bewithgaurav) - [`69a78b9`](https://github.com/openclaw/clawhub/commit/69a78b948c6aa9136e81ab4cefd6e4467d3b03e3) Merge remote-tracking branch 'origin/main' into landpr-183-ff ### 📊 Changes **2 files changed** (+12 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `CHANGELOG.md` (+1 -1) 📝 `src/styles.css` (+11 -0) </details> ### 📄 Description ## 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: ``` browser act profile=openclaw request='{"fn":"() => { /* very long JS */ }", "kind":"evaluate"}' ``` **Current behavior:** - Page becomes ~5934px wide - Horizontal scrolling required at page level - UI feels "wobbly" ## Root Cause `.markdown pre` elements already have `overflow-x: auto` (good!), but parent containers had no width constraints and expanded infinitely to fit content width. ## Solution Added `max-width: 100%` and `overflow-x: auto` to parent containers: - `.skill-detail-stack` - `.tab-card` - `.tab-body` - `.file-list` - `.file-list-body` - `.markdown` - `.markdown pre` **Result:** - ✅ Page stays within viewport width (1200px) - ✅ Code blocks scroll horizontally within tab content area - ✅ No visual changes to properly-sized content ## Testing Verified on https://clawhub.com/skills/zepto which has 675-char lines in SKILL.md - **Before:** Page width 5934px - **After:** Page width 1200px, scrollbar appears in tab content area ## Demo Applied CSS fix live in browser, confirmed: - Document width: 1200px (fixed! ✅) - Tab body has horizontal scrollbar - Code blocks fully accessible via scroll --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-15 17:16:41 -05:00
yindo closed this issue 2026-02-15 17:16:41 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: openclaw/clawhub#288
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?