From 198d7b4c40757b4611adf931ff276f87f00c67b3 Mon Sep 17 00:00:00 2001 From: fOuttaMyPaint <154358121+TMHSDigital@users.noreply.github.com> Date: Sat, 20 Jun 2026 19:03:15 -0400 Subject: [PATCH] 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 . 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 Signed-off-by: fOuttaMyPaint <154358121+TMHSDigital@users.noreply.github.com> --- VERSION | 2 +- docs/index.html | 2 +- site-template/template.html.j2 | 16 ++++++++++++---- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/VERSION b/VERSION index 092afa1..511a76e 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.17.0 +1.17.1 diff --git a/docs/index.html b/docs/index.html index 3939dea..a2e4447 100644 --- a/docs/index.html +++ b/docs/index.html @@ -345,7 +345,7 @@

Scaffold Generator

- v1.17.0 + v1.17.1 · CC-BY-NC-ND-4.0 · diff --git a/site-template/template.html.j2 b/site-template/template.html.j2 index b145866..0286a2a 100644 --- a/site-template/template.html.j2 +++ b/site-template/template.html.j2 @@ -205,13 +205,21 @@ /* SKILL DETAIL ROWS */ details.skill-row { border-bottom: 1px solid rgba(48,54,61,0.5); } - 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; } + 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; } details.skill-row > summary::-webkit-details-marker { display: none; } - 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; } + 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; } details.skill-row[open] > summary::before { transform: rotate(90deg); } details.skill-row > summary:hover { background: var(--bg3); } - .skill-name { font-weight: 500; color: var(--text); white-space: nowrap; min-width: 140px; } - .skill-desc { color: var(--text-dim); font-size: 0.875rem; } + .skill-name { font-weight: 500; color: var(--text); flex: 0 1 12rem; min-width: 0; } + .skill-desc { color: var(--text-dim); font-size: 0.875rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } + /* Narrow screens: stack name above description (the two-column flex row leaves the name + too cramped). flex-wrap + a full-width basis on .skill-desc drops it to its own line + under the triangle+name; indent it to align under the name. */ + @media (max-width: 620px) { + details.skill-row > summary { flex-wrap: wrap; } + .skill-name { flex: 1 1 0; } + .skill-desc { flex: 1 0 100%; margin-left: 1.1rem; } + } .skill-detail { padding: 0.5rem 0.75rem 1rem 1.75rem; } .skill-detail-group { margin-bottom: 0.75rem; } .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; }