Layout cleanup: full-width totals grid, grouped period controls, scrollable tables, wider container

app/main.py

@@ -237,12 +237,12 @@ PAGE_HTML = """<!DOCTYPE html>
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { font-family: 'Figtree', -apple-system, 'Segoe UI', system-ui, sans-serif; background: var(--cream); color: var(--ink); line-height: 1.5; }
-  .wrap { max-width: 980px; margin: 0 auto; padding: 32px 24px 48px; }
+  .wrap { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; }
   header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
   .brand h1 { font-size: 20px; font-weight: 700; }
   .brand .sub { color: var(--muted); font-size: 13px; }
-  .totals { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
-  .tot { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; min-width: 140px; }
+  .totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
+  .tot { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
   .tot .num { font-size: 24px; font-weight: 700; color: var(--green-deep); }
   .tot .lbl { font-size: 12px; color: var(--muted); }
   table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@@ -264,12 +264,16 @@ PAGE_HTML = """<!DOCTYPE html>
   .adjust button:hover { background: #4e7a4d; }
   .adjust .credits-btn { background: var(--bronze, #a97a4a); }
   .adjust .credits-btn:hover { background: #92693c; }
-  .tabs { display: flex; gap: 8px; margin: 28px 0 12px; align-items: center; }
+  .tabs { display: flex; gap: 8px; margin: 28px 0 12px; align-items: center; flex-wrap: wrap; }
   .tabs h2 { font-size: 17px; font-weight: 700; margin-right: 8px; }
   .tab-btn { cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 8px; font-size: 13px; font-weight: 600; padding: 6px 14px; }
   .tab-btn.active { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
-  .range-btn { cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 8px; font-size: 12px; font-weight: 600; padding: 5px 12px; margin-left: auto; }
+  .range-group { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; }
+  .range-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
+  .range-btn { cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 8px; font-size: 12px; font-weight: 600; padding: 5px 12px; }
   .range-btn.active { background: var(--green-mid); color: #fff; border-color: var(--green-mid); }
+  .table-scroll { overflow-x: auto; border-radius: 12px; }
+  .table-scroll table { min-width: 980px; }
   th.sortable { cursor: pointer; user-select: none; }
   th.sortable:hover { color: var(--green-deep); }
   th .arrow { font-size: 10px; margin-left: 3px; opacity: 0.7; }
@@ -296,10 +300,14 @@ PAGE_HTML = """<!DOCTYPE html>
     <h2 id="view-title">Members</h2>
     <button class="tab-btn active" id="tab-members" onclick="switchView('members')">Members</button>
     <button class="tab-btn" id="tab-models" onclick="switchView('models')">Model usage</button>
-    <button class="range-btn" id="range-30" onclick="setRange(30)">Last 30 days</button>
-    <button class="range-btn active" id="range-all" onclick="setRange(0)">All time</button>
+    <span class="range-group" id="range-group" style="display:none;">
+      <span class="range-label">Period</span>
+      <button class="range-btn" id="range-30" onclick="setRange(30)">Last 30 days</button>
+      <button class="range-btn active" id="range-all" onclick="setRange(0)">All time</button>
+    </span>
   </div>
 
+  <div class="table-scroll">
   <table id="table-members">
     <thead>
       <tr>
@@ -317,7 +325,9 @@ PAGE_HTML = """<!DOCTYPE html>
     </thead>
     <tbody id="rows"><tr><td colspan="8" style="color:var(--muted)">Loading…</td></tr></tbody>
   </table>
+  </div>
 
+  <div class="table-scroll" style="margin-top:12px;">
   <table id="table-models" style="display:none;">
     <thead>
       <tr>
@@ -329,6 +339,7 @@ PAGE_HTML = """<!DOCTYPE html>
     </thead>
     <tbody id="model-rows"><tr><td colspan="4" style="color:var(--muted)">Loading…</td></tr></tbody>
   </table>
+  </div>
 </div>
 
 <script>
@@ -403,9 +414,7 @@ function switchView(view) {
   $('tab-models').className = 'tab-btn' + (view === 'models' ? ' active' : '');
   $('view-title').textContent = view === 'members' ? 'Members' : 'Model usage';
   // Range buttons only apply to the models view (spend logs are model-level).
-  const showRange = view === 'models';
-  $('range-30').style.display = showRange ? '' : 'none';
-  $('range-all').style.display = showRange ? '' : 'none';
+  $('range-group').style.display = view === 'models' ? '' : 'none';
   render();
 }