fix: Cleanup mobile

templates/assets/css/index.css

@@ -161,6 +161,20 @@ h1 {
     font-size: 13px;
 }
 
+
+.mobile-accordion summary {
+    display: none;
+}
+
+.mobile-accordion .accordion-content {
+    margin-top: 0;
+}
+
+
+.stats-accordion .stats-grid {
+    margin-bottom: 0;
+}
+
 .search-row {
     display: flex;
     gap: 8px;
@@ -288,6 +302,14 @@ th {
 }
 
 @media (max-width: 720px) {
+    .layout {
+        padding: 14px 10px 24px;
+    }
+
+    .hero {
+        margin-bottom: 12px;
+    }
+
     .search-row {
         flex-direction: column;
     }
@@ -299,12 +321,94 @@ th {
     .stats-grid,
     .stats-grid.compact {
         grid-template-columns: 1fr 1fr;
+        gap: 8px;
+        margin-bottom: 10px;
+    }
+
+    .stat-card {
+        padding: 8px 9px;
+    }
+
+    .stat-card strong {
+        font-size: 17px;
+    }
+
+    .panel {
+        margin-bottom: 10px;
+        padding: 9px;
+    }
+
+    .mobile-accordion {
+        padding: 0;
+        overflow: hidden;
+    }
+
+    .mobile-accordion summary {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        list-style: none;
+        padding: 10px 12px;
+        font-weight: 700;
+        color: var(--accent);
+        border-bottom: 1px solid rgba(255, 107, 53, 0.2);
+        background: rgba(0, 0, 0, 0.14);
+    }
+
+    .mobile-accordion summary::marker,
+    .mobile-accordion summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .mobile-accordion summary::after {
+        content: "+";
+        font-size: 18px;
+        line-height: 1;
+    }
+
+    .mobile-accordion[open] summary::after {
+        content: "-";
+    }
+
+    .mobile-accordion .accordion-content {
+        padding: 9px;
+    }
+
+    .mobile-accordion .panel-head {
+        display: none;
+    }
+
+    .stats-accordion .accordion-content {
+        padding: 7px;
+    }
+
+    .stats-accordion .stats-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 6px;
+    }
+
+    .stats-accordion .stat-card {
+        padding: 6px 7px;
+        border-radius: 10px;
+    }
+
+    .stats-accordion .stat-card span {
+        font-size: 10px;
+    }
+
+    .stats-accordion .stat-card strong {
+        font-size: 13px;
     }
 }
 
 @media (max-width: 620px) {
     h1 {
-        font-size: clamp(26px, 8vw, 36px);
+        font-size: clamp(24px, 8vw, 32px);
+    }
+
+    .subtitle {
+        font-size: 13px;
     }
 
     .stats-grid,
@@ -312,8 +416,12 @@ th {
         grid-template-columns: 1fr;
     }
 
+    .stats-accordion .stats-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .panel {
-        padding: 10px;
+        padding: 8px;
     }
 
     .table-wrap {

templates/index.html

@@ -37,7 +37,16 @@
             </div>
         </header>
 
+        <details class="panel mobile-accordion stats-accordion" data-accordion="summary" open>
+            <summary>Pool Stats</summary>
+            <div class="accordion-content">
+                <div class="panel-head">
+                    <h2>Pool Stats</h2>
+                    <p>Live network and reward snapshot</p>
+                </div>
                 <section class="stats-grid" id="poolSummary"></section>
+            </div>
+        </details>
 
         <section class="panel search-panel">
             <div class="panel-head">
@@ -52,7 +61,9 @@
             <div class="stats-grid compact" id="minerSummary"></div>
         </section>
 
-        <section class="panel">
+        <details class="panel mobile-accordion" data-accordion="workers" open>
+            <summary>Workers</summary>
+            <div class="accordion-content">
                 <div class="panel-head">
                     <h2>Workers</h2>
                     <p id="workerCountLabel">Pool workers</p>
@@ -73,9 +84,12 @@
                         <tbody id="workersBody"></tbody>
                     </table>
                 </div>
-        </section>
+            </div>
+        </details>
 
-        <section class="panel">
+        <details class="panel mobile-accordion" data-accordion="blocks" open>
+            <summary>Blocks</summary>
+            <div class="accordion-content">
                 <div class="panel-head">
                     <h2>Blocks</h2>
                     <p id="blockCountLabel">Recent block history</p>
@@ -95,9 +109,12 @@
                         <tbody id="blocksBody"></tbody>
                     </table>
                 </div>
-        </section>
+            </div>
+        </details>
 
-        <section class="panel">
+        <details class="panel mobile-accordion" data-accordion="balances" open>
+            <summary>Balances</summary>
+            <div class="accordion-content">
                 <div class="panel-head">
                     <h2>Balances</h2>
                 </div>
@@ -114,9 +131,12 @@
                         <tbody id="balancesBody"></tbody>
                     </table>
                 </div>
-        </section>
+            </div>
+        </details>
 
-        <section class="panel">
+        <details class="panel mobile-accordion" data-accordion="payouts" open>
+            <summary>Payouts</summary>
+            <div class="accordion-content">
                 <div class="panel-head">
                     <h2>Payouts</h2>
                 </div>
@@ -134,7 +154,8 @@
                         <tbody id="payoutsBody"></tbody>
                     </table>
                 </div>
-        </section>
+            </div>
+        </details>
 
         <section class="panel setup-panel">
             <div class="panel-head">
@@ -144,7 +165,7 @@
             <a class="setup-link" href="/setup-miner">Open Miner Setup Guide</a>
         </section>
         <footer class="footer">
-            <p>Powered by <a href="https://nathan.woodburn.au" target="_blank" rel="noopener">Nathan.Woodburn/</a>
+            <p>Powered by <a href="https://nathan.woodburn.au" target="_blank" rel="noopener">Nathan.Woodburn/</a></p>
         </footer>
     </main>
 
@@ -211,6 +232,17 @@
             stamp.textContent = `Last update: ${new Date().toLocaleString()}`;
         }
 
+
+        function initMobileAccordions() {
+            const accordions = document.querySelectorAll('.mobile-accordion');
+            if (!accordions.length) return;
+
+            const isCompact = window.matchMedia('(max-width: 720px)').matches;
+            accordions.forEach((accordion, idx) => {
+                accordion.open = !isCompact || idx === 0;
+            });
+        }
+
         async function loadOverview() {
             const res = await fetch("/api/v1/pool/overview");
             if (!res.ok) {
@@ -424,6 +456,7 @@
             }
         });
 
+        initMobileAccordions();
         refreshAll();
         setInterval(refreshAll, refreshMs);
     </script>