fix: stop skill name overflowing/overlapping the description#88
Merged
Conversation
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
The Skills accordion rendered .skill-name with white-space:nowrap + min-width:140px inside a non-wrapping flex <summary>. The flex algorithm shrinks the name box toward 140px while nowrap keeps the text full width, so the name's ink overflows its box and paints over .skill-desc. Confirmed on multiple live fleet sites (Blender- and Plaid-Developer-Tools), desktop and mobile, expanded state. CSS-only fix (Skills section only): - .skill-name: drop white-space:nowrap + min-width:140px; flex:0 1 12rem + min-width:0 -> an honest, wrapping column. - .skill-desc: flex:1 1 auto + min-width:0 + overflow-wrap:anywhere (wraps long code tokens instead of overflowing). - summary: align-items flex-start; nudge the disclosure triangle to the first line. - <=620px: flex-wrap so the description stacks full-width under the name. Verified by local build + headless screenshots across Blender, Plaid, and Docker (expanded + collapsed, desktop 1280 + mobile 390): overlap gone, short-name rows unaffected, collapse and the Rules table unchanged. No build_site.py / data-schema / DOM / non-Skills changes. Resolves the confirmed rendering-defect subset of #86 (facelift scope remains open). Bumps VERSION 1.17.0 -> 1.17.1 and regenerates docs/index.html (the version footer) per the repo's release-hygiene gates. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: fOuttaMyPaint <154358121+TMHSDigital@users.noreply.github.com>
TMHSDigital
force-pushed
the
fix/skill-name-overflow
branch
from
9027858 to
198d7b4
Compare
github-actions
Bot
added
the
documentation
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.
The bug (confirmed on live fleet sites)
The Skills accordion renders
.skill-namewithwhite-space:nowrap+min-width:140pxinside a non-wrapping flex<summary>. The flex algorithm shrinks the name's box toward 140px (themin-widthlowers its min-content floor), butnowrapkeeps the text at full width — so the name's ink overflows its box and paints over.skill-desc. Seen on Blender-Developer-Tools and Plaid-Developer-Tools, desktop and mobile, in the expanded state.Fix (CSS-only, Skills section only)
.skill-name: dropwhite-space:nowrap+min-width:140px; useflex: 0 1 12rem; min-width: 0→ an honest, wrapping column..skill-desc:flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere(wraps long code tokens instead of overflowing).summary:align-items: flex-start(top-align the columns); nudge the disclosure triangle to the first text line.@media (max-width: 620px):flex-wrapso the description stacks full-width under the name (the two-column row is too cramped on phones).No
build_site.py/ data-schema / DOM / non-Skills changes.Verified locally BEFORE merge (floating-main → build-and-see first)
Built 3 repos with the patched template and screenshotted with headless Chrome (expanded + collapsed, desktop 1280 + mobile 390):
Resolves the confirmed rendering-defect subset of #86 (the facelift/examples scope stays open — do not close #86).
🤖 Generated with Claude Code