fix(gallery): sweep-driven cleanup — contain the keyset bars, boost tiny widgets

A bounding-box audit over all 109 cards caught the voice-loop monitor bars streaking across the card: Chrome's CSS zoom miscomputes absolute insets, fr tracks, and stretched widths inside zoomed stages, so the keyset now uses fixed pixel tracks and bars, which zoom scales correctly. Seven intrinsically tiny widgets (toggle, chip, arm-to-fire, mini signal, ladder, thermometer, status lamp) get a boost zoom so they stop floating in oversized stages.

1 files changed, 12 insertions, 3 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index d67034b..839d479 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -57,6 +57,10 @@ h1{color:var(--gold);font-size:1.5rem;margin:.35rem 0 .4rem}
 /* size toggle scales the widget stage only; card text stays at its own (slightly raised) size */
 body[data-size="2"] .stagew{zoom:1.7}
 body[data-size="3"] .stagew{zoom:2.4}
+/* intrinsically tiny widgets get an extra bump so they do not float in an empty stage */
+.stagew.boost{zoom:1.5}
+body[data-size="2"] .stagew.boost{zoom:2.55}
+body[data-size="3"] .stagew.boost{zoom:3.6}
 body[data-size="2"] .grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
 body[data-size="3"] .grid{grid-template-columns:repeat(auto-fill,minmax(520px,1fr))}
 body[data-size="2"] .wrap,body[data-size="3"] .wrap{max-width:none}
@@ -390,11 +394,12 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 .scope polyline{fill:none;stroke:var(--scr-hi,var(--phos));stroke-width:1.6;filter:drop-shadow(0 0 3px var(--scr-glow,rgba(127,224,160,.8)))}
 
 /* voice-loop keyset */
-.vloop{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
-.vk{position:relative;font-size:7px;letter-spacing:.05em;text-align:center;padding:7px 4px 9px;cursor:pointer;
+.vloop{display:grid;grid-template-columns:repeat(4,52px);gap:4px}
+.vk{display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:7px;letter-spacing:.05em;
+  text-align:center;padding:6px 4px 4px;cursor:pointer;
   color:var(--dim);background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-radius:4px;
   font-family:var(--mono)}
-.vk .bar{position:absolute;left:4px;right:4px;bottom:3px;height:3px;border-radius:2px;background:#16240f}
+.vk .bar{height:3px;width:40px;align-self:center;border-radius:2px;background:#16240f}
 .vk.mon{color:var(--silver)}
 .vk.mon .bar{background:var(--pass);box-shadow:0 0 4px rgba(116,147,47,.6)}
 .vk.mon.act .bar{background:#a8d84a;box-shadow:0 0 7px rgba(150,200,60,.9)}
@@ -636,6 +641,8 @@ document.querySelectorAll('.szbar .key').forEach(b=>b.addEventListener('click',(
   document.body.dataset.size=b.dataset.sz;
   document.querySelectorAll('.szbar .key').forEach(k=>k.classList.toggle('on',k===b));
 }));
+/* boost the intrinsically tiny widgets (audit: content under 10% of the stage) */
+const BOOST=['01','07','08','12','13','N14','18'];
 
 /* ---- palette section: read the generated :root block live ---- */
 (function buildPalette(){
@@ -4130,6 +4137,8 @@ screenChips('R17',$('rcrt'),['green','amber','red','blue','vfd'],'green');
 screenChips('R19',$('wregion'),['white','green','amber','blue','vfd'],'white');
 screenChips('R31',$('radar'),['amber','green','red','blue','vfd'],'amber');
 screenChips('N11',$('scopep').closest('.scope'),['green','amber','red','blue','vfd'],'green');
+BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
+  if(rd)rd.closest('.card').querySelector('.stagew').classList.add('boost');});
 </script>
 </body>
 </html>