From b8f9e585e901ee3158a37e36ad7e8cef59139655 Mon Sep 17 00:00:00 2001
From: dirtydishes <dishes@riseup.net>
Date: Mon, 29 Dec 2025 16:31:02 -0500
Subject: [PATCH] Adjust dashboard grid proportions

Set Options tape to 2/3 width, Equities to 1/3, and keep Flow/Alerts/Classifier hits as equal thirds with responsive fallbacks.
---
 apps/web/app/globals.css | 44 +++++++++++++++++++++++++++++++++++++++-
 apps/web/app/page.tsx    | 10 ++++-----
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index d42c728..d2b0953 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -109,7 +109,21 @@ h1 {
 .cards {
   display: grid;
   gap: 28px;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.card-options {
+  grid-column: span 4;
+}
+
+.card-equities {
+  grid-column: span 2;
+}
+
+.card-flow,
+.card-alerts,
+.card-classifiers {
+  grid-column: span 2;
 }
 
 .status {
@@ -431,3 +445,31 @@ h1 {
     text-align: left;
   }
 }
+
+@media (max-width: 1100px) {
+  .cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .card-options,
+  .card-equities,
+  .card-flow,
+  .card-alerts,
+  .card-classifiers {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 860px) {
+  .cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .card-options,
+  .card-equities,
+  .card-flow,
+  .card-alerts,
+  .card-classifiers {
+    grid-column: span 1;
+  }
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 26cf52d..2b39715 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -905,7 +905,7 @@ export default function HomePage() {
       </header>
 
       <div className="cards">
-        <section className="card">
+        <section className="card card-options">
           <div className="card-header">
             <div>
               <h2>Options Tape</h2>
@@ -958,7 +958,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-equities">
           <div className="card-header">
             <div>
               <h2>Equities Tape</h2>
@@ -1013,7 +1013,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-flow">
           <div className="card-header">
             <div>
               <h2>Flow Packets</h2>
@@ -1077,7 +1077,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-alerts">
           <div className="card-header">
             <div>
               <h2>Alerts</h2>
@@ -1138,7 +1138,7 @@ export default function HomePage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card card-classifiers">
           <div className="card-header">
             <div>
               <h2>Classifier Hits</h2>