fix: mobile overlays — !important on meta rows, cache-bust v2, simplified toggle JS (CSS-driven visibility)

Author: Dexter

fandom.html

@@ -15,7 +15,7 @@
 <meta name="twitter:description" content="Every Moment is real. Every collector is real. Every connection is on-chain." />
 <meta name="twitter:image" content="https://fandom-v3.vercel.app/og-default.png" />
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23ff2d4e'/%3E%3Ctext x='16' y='22' font-family='Arial Black' font-size='18' font-weight='900' text-anchor='middle' fill='white'%3ETS%3C/text%3E%3C/svg%3E" />
-<link rel="stylesheet" href="styles.css?v=20260627m" />
+<link rel="stylesheet" href="styles.css?v=20260627m2" />
 <style>
   body { overflow-x: hidden; }
 

fandom.js

@@ -3500,53 +3500,29 @@
   // else: no auto-route. Picker is visible, graph-area hidden by CSS until first click.
 
   // ===== Mobile overlay toggles =====
-  // On mobile, overlays are collapsed by CSS. These JS hooks add toggle buttons.
-  function isMobile() { return window.matchMedia('(max-width: 768px)').matches; }
+  // On mobile, overlays are collapsed by CSS (@media max-width:768px).
+  // These JS hooks add interactive toggles for the user to expand them.
 
-  // Legend toggle button (top-left on mobile)
+  // Legend toggle button (top-left on mobile, shown/hidden by CSS media query)
   const legendToggle = document.createElement('button');
   legendToggle.className = 'mobile-toggle-btn';
   legendToggle.textContent = '☰';
   legendToggle.title = 'Toggle legend';
-  legendToggle.style.display = 'none';
   legendToggle.addEventListener('click', () => {
     const legend = document.getElementById('graph-legend');
     if (legend) legend.classList.toggle('mobile-visible');
   });
-  document.querySelector('.graph-area').appendChild(legendToggle);
+  const graphAreaEl = document.querySelector('.graph-area');
+  if (graphAreaEl) graphAreaEl.appendChild(legendToggle);
 
   // Meta panel: tap to expand stats on mobile
   const meta = document.getElementById('graph-meta');
   if (meta) {
     meta.addEventListener('click', () => {
-      if (isMobile()) meta.classList.toggle('mobile-expanded');
-    });
-  }
-
-  // Show/hide the toggle button when graph becomes visible
-  const showMobileControls = () => {
-    if (isMobile()) {
-      legendToggle.style.display = 'flex';
-    } else {
-      legendToggle.style.display = 'none';
-      // Reset desktop state
-      const legend = document.getElementById('graph-legend');
-      if (legend) legend.classList.remove('mobile-visible');
-      if (meta) meta.classList.remove('mobile-expanded');
-    }
-  };
-
-  // Watch for graph visibility changes
-  const graphArea = document.querySelector('.graph-area');
-  if (graphArea) {
-    const observer = new MutationObserver(() => {
-      const legend = document.getElementById('graph-legend');
-      if (legend && legend.style.display !== 'none') showMobileControls();
+      if (window.matchMedia('(max-width: 768px)').matches) {
+        meta.classList.toggle('mobile-expanded');
+      }
     });
-    observer.observe(graphArea, { attributes: true, subtree: true, attributeFilter: ['style'] });
   }
-
-  // Also respond to viewport changes (orientation, resize)
-  window.addEventListener('resize', showMobileControls);
 })();
 

styles.css

@@ -3755,8 +3755,8 @@ footer .footer-inner code { font-family: var(--mono); color: var(--fg-muted); }
     right: 14px;
   }
   .graph-meta .player-name { font-size: 16px; }
-  .graph-meta .row { display: none; }
-  .graph-meta.mobile-expanded .row { display: flex; }
+  .graph-meta .row { display: none !important; }
+  .graph-meta.mobile-expanded .row { display: flex !important; }
   .graph-meta.mobile-expanded { max-width: 260px; }
 
   /* Controls: compact, bottom-left, smaller buttons */