Fix mobile responsiveness: workbench layout, ticker banner, touch targets

systemslibrarian · systemslibrarian · commit 3399503bbdec · 2026-03-19T01:32:33.000Z
- Workbench: remove sidebar-first reorder on mobile (input panel shows first)
- Workbench: reduce container/panel padding on mobile (2rem→1rem, 1.5rem→1rem)
- Workbench: add 44px min touch target on Copy button
- Ticker: enable scrolling marquee animation on mobile (&lt;600px)
- Ticker: clone items for seamless loop, remove on resize above 600px
- Global: tighten grid gap on mobile workbench (1.5rem→1rem)
diff --git a/css/museum.css b/css/museum.css
@@ -545,9 +545,9 @@ pre,.output-box,.wb-output-area{overflow-x:auto;max-width:100%}
 
 /* ── Ticker fix ── */
 @media(max-width:600px){
-  .ticker-strip{padding:.6rem 0}
+  .ticker-strip{padding:.6rem 0;overflow:hidden}
   .ticker-item{font-size:.7rem;letter-spacing:.1em;gap:.4rem;min-height:40px}
-  .ticker-track{gap:2rem}
+  .ticker-track{flex-wrap:nowrap;justify-content:flex-start;gap:2rem;max-width:none;width:max-content;animation:ticker 30s linear infinite;padding:0 1rem}
 }
 
 /* ── Page hero: tighter on mobile ── */
@@ -623,15 +623,17 @@ pre,.output-box,.wb-output-area{overflow-x:auto;max-width:100%}
 
 /* ── Workbench layout: stack ── */
 @media(max-width:768px){
-  .wb-layout{grid-template-columns:1fr !important}
-  .wb-sidebar{order:-1}
+  .wb-main-wrap{padding:0 1rem 3rem}
+  .wb-layout{grid-template-columns:1fr !important;gap:1rem}
+  .wb-panel{padding:1rem}
   .wb-textarea{min-height:100px;font-size:.78rem}
   .wb-row{flex-direction:column}
   .wb-row>div{min-width:0}
   .wb-actions{flex-wrap:wrap}
   .wb-btn{min-height:44px;flex:1;min-width:0;font-size:.72rem;padding:.6rem .8rem}
   .wb-label{font-size:.62rem}
   .wb-select,.wb-input{font-size:.82rem;padding:.6rem .75rem;min-height:44px}
+  .wb-copy{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
   .freq-bar-wrap{height:70px}
   .freq-labels span{font-size:.45rem}
 }
diff --git a/index.html b/index.html
@@ -381,5 +381,23 @@ <h3 class="era-card-title">Act III · Mathematics Wins</h3>
 </script>
 <script src="js/nav.js" defer></script>
 <script src="js/lightbox.js"></script>
+<script>
+(function(){
+  var mq=window.matchMedia('(max-width:600px)');
+  function initTicker(e){
+    var track=document.querySelector('.ticker-track');
+    if(!track)return;
+    var duped=track.querySelector('[data-ticker-clone]');
+    if(e.matches&&!duped){
+      var items=track.querySelectorAll('.ticker-item');
+      items.forEach(function(el){var c=el.cloneNode(true);c.setAttribute('data-ticker-clone','');c.setAttribute('aria-hidden','true');track.appendChild(c);});
+    }else if(!e.matches&&duped){
+      track.querySelectorAll('[data-ticker-clone]').forEach(function(el){el.remove();});
+    }
+  }
+  mq.addEventListener('change',initTicker);
+  initTicker(mq);
+})();
+</script>
 </body>
 </html>
diff --git a/lab/workbench.html b/lab/workbench.html
@@ -7,6 +7,7 @@
 <meta name="description" content="A unified cryptanalysis interface: encrypt, decrypt, and analyze ciphertext with live frequency analysis and multiple cipher engines.">
 <link rel="stylesheet" href="../css/museum.css">
 <style>
+.wb-main-wrap{max-width:1200px;margin:0 auto;padding:0 2rem 4rem}
 .wb-layout{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;margin-top:2rem}
 .wb-main{display:flex;flex-direction:column;gap:1.5rem}
 .wb-sidebar{display:flex;flex-direction:column;gap:1.5rem}
@@ -36,7 +37,6 @@
 .wb-output-area{background:var(--s1);border:1px solid var(--s5);border-radius:var(--r);padding:.85rem;font-family:var(--fm);font-size:.82rem;color:var(--tx);min-height:80px;white-space:pre-wrap;word-break:break-all;line-height:1.6}
 .wb-copy{position:absolute;top:.5rem;right:.5rem;background:var(--s3);border:1px solid var(--s5);border-radius:var(--r);color:var(--tx3);font-family:var(--fm);font-size:.55rem;letter-spacing:.1em;padding:.3rem .6rem;cursor:pointer}
 .wb-copy:hover{color:var(--gold);border-color:var(--gold-b)}
-@media(max-width:768px){.wb-layout{grid-template-columns:1fr}.wb-sidebar{order:-1}}
 </style>
 </head>
 <body>
@@ -56,7 +56,7 @@ <h1>Codebreaker's Workbench</h1>
   <p class="hero-intro">Encrypt, decrypt, and analyze text with 33 cipher engines. Watch frequency distributions shift in real time.</p>
 </section>
 
-<main style="max-width:1200px;margin:0 auto;padding:0 2rem 4rem">
+<main class="wb-main-wrap">
 
 <div class="wb-layout">
   <!-- ─── Main Panel ─── -->
