Skip to content

Commit 198d7b4

Browse files
TMHSDigitalclaude
andcommitted
fix: stop skill name overflowing/overlapping the description
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>
1 parent a31ab69 commit 198d7b4

3 files changed

Lines changed: 14 additions & 6 deletions

File tree

VERSION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1.17.0
1+
1.17.1

docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ <h3>Scaffold Generator</h3>
345345
</div>
346346
<div class="footer-divider"></div>
347347
<div class="footer-meta">
348-
<span id="footerVersion">v1.17.0</span>
348+
<span id="footerVersion">v1.17.1</span>
349349
<span>&middot;</span>
350350
<span>CC-BY-NC-ND-4.0</span>
351351
<span>&middot;</span>

site-template/template.html.j2

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -205,13 +205,21 @@
205205
206206
/* SKILL DETAIL ROWS */
207207
details.skill-row { border-bottom: 1px solid rgba(48,54,61,0.5); }
208-
details.skill-row > summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; list-style: none; transition: background 0.15s; }
208+
details.skill-row > summary { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; list-style: none; transition: background 0.15s; }
209209
details.skill-row > summary::-webkit-details-marker { display: none; }
210-
details.skill-row > summary::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 5px solid var(--accent-light); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.2s; flex-shrink: 0; }
210+
details.skill-row > summary::before { content: ''; display: inline-block; width: 0; height: 0; margin-top: 0.4rem; border-left: 5px solid var(--accent-light); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.2s; flex-shrink: 0; }
211211
details.skill-row[open] > summary::before { transform: rotate(90deg); }
212212
details.skill-row > summary:hover { background: var(--bg3); }
213-
.skill-name { font-weight: 500; color: var(--text); white-space: nowrap; min-width: 140px; }
214-
.skill-desc { color: var(--text-dim); font-size: 0.875rem; }
213+
.skill-name { font-weight: 500; color: var(--text); flex: 0 1 12rem; min-width: 0; }
214+
.skill-desc { color: var(--text-dim); font-size: 0.875rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
215+
/* Narrow screens: stack name above description (the two-column flex row leaves the name
216+
too cramped). flex-wrap + a full-width basis on .skill-desc drops it to its own line
217+
under the triangle+name; indent it to align under the name. */
218+
@media (max-width: 620px) {
219+
details.skill-row > summary { flex-wrap: wrap; }
220+
.skill-name { flex: 1 1 0; }
221+
.skill-desc { flex: 1 0 100%; margin-left: 1.1rem; }
222+
}
215223
.skill-detail { padding: 0.5rem 0.75rem 1rem 1.75rem; }
216224
.skill-detail-group { margin-bottom: 0.75rem; }
217225
.skill-detail-group strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 0.35rem; }

0 commit comments

Comments
 (0)