app
Component Widgets
Public Made by Adomby adom
Reusable component widgets for pinouts, thermal vias, molecule relationships, reviewed chip outlines and lightweight four-level LOD cache listings.
← Commit history
pinout: table matches chip height (fills space, scrolls) + modern scrollbar (grey thumb, no track/buttons)
2 files changed
+30−2
files/pinout-widget.js+15−1@@ -209,6 +209,14 @@ const root = this.shadowRoot; root.querySelectorAll('tr[data-pin]').forEach(r => { r.onmouseenter = () => this._set(r.dataset.pin, true); r.onmouseleave = () => this._set('', true); }); root.querySelectorAll('svg .pin[data-pin]').forEach(g => { g.onmouseenter = () => this._set(g.dataset.pin, true); g.onmouseleave = () => this._set('', true); });+ // Match the pin table's height to the chip diagram column so it fills the+ // space and scrolls, instead of a fixed short box next to a taller chip.+ const dia = root.querySelector('.diagram'), tw = root.querySelector('.tablewrap');+ if (dia && tw) {+ const fit = () => { const h = dia.getBoundingClientRect().height; if (h > 40) tw.style.maxHeight = Math.round(h) + 'px'; };+ requestAnimationFrame(fit); setTimeout(fit, 60);+ try { if (this._ro) this._ro.disconnect(); this._ro = new ResizeObserver(fit); this._ro.observe(dia); } catch (e) { /* */ }+ } } _css() {@@ -242,7 +250,13 @@ .pin{cursor:default} .legend{display:flex;flex-wrap:wrap;gap:13px;margin:8px 2px 2px;font-size:11.5px;color:var(--dim)} .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}- .tablewrap{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:10px}+ .tablewrap{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}+ .tablewrap::-webkit-scrollbar{width:9px;height:9px}+ .tablewrap::-webkit-scrollbar-track{background:transparent}+ .tablewrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:2px solid transparent;background-clip:padding-box}+ .tablewrap::-webkit-scrollbar-thumb:hover{background:var(--dim2);border:2px solid transparent;background-clip:padding-box}+ .tablewrap::-webkit-scrollbar-button{display:none;width:0;height:0}+ .tablewrap::-webkit-scrollbar-corner{background:transparent} table{width:100%;border-collapse:collapse;font-size:12.5px} thead th{position:sticky;top:0;background:var(--panel);text-align:left;color:var(--dim2);font:600 10px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;border-bottom:1px solid var(--line)} td{padding:4px 9px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-family:ui-monospace,monospace}
readme.html+15−1@@ -453,6 +453,14 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace const root = this.shadowRoot; root.querySelectorAll('tr[data-pin]').forEach(r => { r.onmouseenter = () => this._set(r.dataset.pin, true); r.onmouseleave = () => this._set('', true); }); root.querySelectorAll('svg .pin[data-pin]').forEach(g => { g.onmouseenter = () => this._set(g.dataset.pin, true); g.onmouseleave = () => this._set('', true); });+ // Match the pin table's height to the chip diagram column so it fills the+ // space and scrolls, instead of a fixed short box next to a taller chip.+ const dia = root.querySelector('.diagram'), tw = root.querySelector('.tablewrap');+ if (dia && tw) {+ const fit = () => { const h = dia.getBoundingClientRect().height; if (h > 40) tw.style.maxHeight = Math.round(h) + 'px'; };+ requestAnimationFrame(fit); setTimeout(fit, 60);+ try { if (this._ro) this._ro.disconnect(); this._ro = new ResizeObserver(fit); this._ro.observe(dia); } catch (e) { /* */ }+ } } _css() {@@ -486,7 +494,13 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace .pin{cursor:default} .legend{display:flex;flex-wrap:wrap;gap:13px;margin:8px 2px 2px;font-size:11.5px;color:var(--dim)} .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}- .tablewrap{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:10px}+ .tablewrap{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}+ .tablewrap::-webkit-scrollbar{width:9px;height:9px}+ .tablewrap::-webkit-scrollbar-track{background:transparent}+ .tablewrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:2px solid transparent;background-clip:padding-box}+ .tablewrap::-webkit-scrollbar-thumb:hover{background:var(--dim2);border:2px solid transparent;background-clip:padding-box}+ .tablewrap::-webkit-scrollbar-button{display:none;width:0;height:0}+ .tablewrap::-webkit-scrollbar-corner{background:transparent} table{width:100%;border-collapse:collapse;font-size:12.5px} thead th{position:sticky;top:0;background:var(--panel);text-align:left;color:var(--dim2);font:600 10px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;border-bottom:1px solid var(--line)} td{padding:4px 9px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-family:ui-monospace,monospace}