From 0a1208e4969e9e52e61a909b87c40290f34f8777 Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Sat, 15 Aug 2026 01:35:08 +0000
Subject: [PATCH] Readability + phone-fit pass: kill horizontal overflow,
 calmer type/spacing, collapse long use-cases + SPICE

---
 assets/part.js   |  9 ++++---
 assets/style.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/assets/part.js b/assets/part.js
index 0f383a3..0b185c9 100644
--- a/assets/part.js
+++ b/assets/part.js
@@ -58,7 +58,10 @@ window.ppcbReady(async () => {
 
   const params = (p.params || []).map((x) => `<tr><td>${esc(x.name)}</td><td class="v">${esc(x.value)} ${esc(x.unit || '')}${x.note ? `<span class="cond">${esc(x.note)}</span>` : ''}</td></tr>`).join('');
   const pinsList = (p.pins || []).map((x) => `<div class="pin"><span class="n">${esc(x.pin ?? '')}</span>${esc(x.name || '')}<span class="t">${esc(x.type || '')}</span></div>`).join('');
-  const ucs = (p.use_cases || []).map((u) => `<li>${esc(u)}</li>`).join('');
+  const ucArr = p.use_cases || [];
+  const ucLi = (a) => a.map((u) => `<li>${esc(u)}</li>`).join('');
+  const ucs = ucArr.length ? `<ul class="uc">${ucLi(ucArr.slice(0, 5))}</ul>` +
+    (ucArr.length > 5 ? `<details class="more"><summary>+${ucArr.length - 5} more uses</summary><ul class="uc">${ucLi(ucArr.slice(5))}</ul></details>` : '') : '';
   const tagList = Object.entries(p.tags || {}).filter(([, v]) => v != null && v !== '' && !Array.isArray(v) && typeof v !== 'boolean').map(([k, v]) => `<span class="tag"><b>${esc(k)}</b> ${esc(v)}</span>`).join('');
   const kr = ((p.tags || {}).key_ratings || []).map((r) => `<span class="tag">${esc(r)}</span>`).join('');
   const ser = p.series ? `<div class="tags" style="margin-top:8px">${Object.entries(p.series).filter(([k]) => k !== 'mesh').map(([k, v]) => `<span class="tag"><b>${esc(k)}</b> ${esc(v)}</span>`).join('')}</div>` : '';
@@ -84,12 +87,12 @@ window.ppcbReady(async () => {
       </div>
       <div class="assets"><span><span class="ok">✓</span> 3D model</span><span><span class="ok">✓</span> Schematic</span><span><span class="ok">✓</span> Footprint</span><span><span class="ok">✓</span> SPICE</span><span><span class="ok">✓</span> ${(p.pins || []).length} pins</span></div>
       ${p.when_to_use ? `<div class="section"><h3>When to use</h3><p style="color:var(--text);line-height:1.6;margin:0">${esc(p.when_to_use)}</p></div>` : ''}
-      ${ucs ? `<div class="section"><h3>What it's used for</h3><ul class="uc">${ucs}</ul></div>` : ''}
+      ${ucs ? `<div class="section"><h3>What it's used for</h3>${ucs}</div>` : ''}
       ${params ? `<div class="section"><h3>Specifications</h3><table class="ptable">${params}</table></div>` : ''}
       ${ser}
       ${pinsList ? `<div class="section"><h3>Pins &amp; pads</h3><div class="pins">${pinsList}</div></div>` : ''}
       ${(tagList || kr) ? `<div class="section"><h3>Requirement tags</h3><div class="tags">${kr}${tagList}</div></div>` : ''}
-      ${p.spice ? `<div class="section"><h3>SPICE model</h3><pre class="spice">${esc(p.spice)}</pre></div>` : ''}
+      ${p.spice ? `<div class="section"><h3>SPICE model</h3><details class="more"><summary>show model</summary><pre class="spice">${esc(p.spice)}</pre></details></div>` : ''}
     </div>
   </div>`;
 
diff --git a/assets/style.css b/assets/style.css
index c7d4641..8613a99 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -207,3 +207,71 @@ html:not(.ppcb-authed) body{overflow:hidden}
   .assets{gap:12px;font-size:12px}
   .gate-h{font-size:24px}
 }
+
+/* ============ readability + phone-fit pass (overrides) ============ */
+html,body{overflow-x:hidden;max-width:100%}
+body{font-size:16px;line-height:1.55}
+.wrap{max-width:1060px}
+/* grid/flex children must be allowed to shrink, or wide content (SPICE, tables, monospace) forces
+   the whole page wider than the viewport = horizontal scroll on phones */
+.detail>div,.card,.vals>div,.viz,.grid>*{min-width:0}
+pre.spice{max-width:100%;font-size:12px}
+.ptable{table-layout:fixed;width:100%}
+.ptable td{word-break:break-word}
+.ptable td:first-child{width:42%}
+.uc li{overflow-wrap:anywhere}
+
+/* calmer, more readable type + spacing */
+.hero{min-height:70vh}
+.hero h1{font-size:clamp(32px,5.4vw,60px);max-width:17ch;line-height:1.04}
+.hero p{font-size:clamp(16px,1.9vw,18px);max-width:50ch}
+.sec{padding:68px 0}
+.sec h2{font-size:clamp(25px,3.2vw,36px)}
+.sec .lead{font-size:17px}
+.vals{margin-top:44px;gap:24px}
+.val h3{font-size:19px}
+.val p{font-size:15px}
+
+/* detail page: tighter + scannable */
+.detail{gap:36px;padding:36px 0 80px}
+.dclass{font-size:12px}
+.dh1{font-size:clamp(25px,3.2vw,36px)}
+.dmpn{font-size:14px}
+.section{margin:24px 0}
+.section h3{margin-bottom:10px}
+.uc li{font-size:15px;padding:11px 0;line-height:1.5}
+.ptable{font-size:14px}
+.ptable td{padding:9px 4px}
+.pin{font-size:12px;padding:8px 10px}
+.card .sm{font-size:13px}
+.assets{gap:16px;font-size:12px}
+
+/* mobile */
+@media(max-width:820px){
+  .hero{min-height:auto;padding:92px 0 64px}
+  #hero-canvas{opacity:.65}
+  .sec{padding:48px 0}
+  .vizpanel,.viewer{height:44vh;min-height:270px}
+  .dactions{gap:8px}
+  .dactions .btn{padding:11px 15px;font-size:14px}
+}
+@media(max-width:540px){
+  .wrap{padding:0 16px}
+  nav.main{gap:13px}
+  nav.main a{font-size:12px}
+  .hero h1{font-size:clamp(27px,8.5vw,38px)}
+  .hero p{font-size:15px}
+  .sec h2{font-size:23px}
+  .sec .lead,.val p,.card .sm{font-size:14px}
+  .uc li{font-size:14px}
+  pre.spice{font-size:11px}
+}
+
+/* collapsible "more" toggles (use-cases / SPICE) */
+.more{margin-top:8px}
+.more>summary{cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--acc);list-style:none;padding:6px 0}
+.more>summary::-webkit-details-marker{display:none}
+.more>summary::before{content:"+ "}
+.more[open]>summary::before{content:"– "}
+.more[open]>summary{margin-bottom:8px}
+.more .uc li:first-child{border-top:1px solid var(--line)}