Server web UI: rebalance the two-column layout

The right column had grown to 5 stacked cards (Now displaying, Device,
Battery history, Firmware update, Stats) against the left's single
Settings form, running noticeably longer. Moved the collapsed Stats
card into a new left-column stack under Settings -- it's already
de-emphasized by design, so pairing it with the other
occasionally-checked column reads naturally, and it's small enough
(collapsed by default) to roughly balance the two columns' heights
without overcorrecting the other way.

server/app/templates/base.html

@@ -284,7 +284,7 @@
       gap: 20px;
       align-items: start;
     }
-    .side-col { display: flex; flex-direction: column; }
+    .main-col, .side-col { display: flex; flex-direction: column; }
     @media (max-width: 860px) {
       .layout { grid-template-columns: 1fr; }
     }

server/app/templates/index.html

@@ -16,6 +16,7 @@
   {% endif %}
 
   <div class="layout">
+    <div class="main-col">
     <section class="card config-panel">
       <h2 class="card-title">Settings</h2>
       <form id="config-form">
@@ -80,6 +81,12 @@
       <div id="result"></div>
     </section>
 
+    <details class="card">
+      <summary class="card-title">Stats</summary>
+      <div id="stats-box"><p class="sub">Loading...</p></div>
+    </details>
+    </div>
+
     <div class="side-col">
       <section class="card">
         <h2 class="card-title">Now displaying</h2>
@@ -105,11 +112,6 @@
         <input type="file" id="firmware-file" accept=".bin">
         <button type="button" class="secondary" id="firmware-upload">Upload firmware</button>
       </section>
-
-      <details class="card">
-        <summary class="card-title">Stats</summary>
-        <div id="stats-box"><p class="sub">Loading...</p></div>
-      </details>
     </div>
   </div>