From fb7309c094cb880f7bf539628545ac86b135ac42 Mon Sep 17 00:00:00 2001
From: James Smith <jsmith@Jamess-MBP.Home>
Date: Mon, 22 Dec 2025 15:52:11 +0000
Subject: [PATCH] Fix satellite dashboard layout - proper 3-column grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Simplified grid to single row layout
- Fixed sidebar to not span multiple rows
- Lowered responsive breakpoint to 1200px
- Fixed panel flex-shrink behavior
- Better mobile breakpoint at 800px

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 intercept.py | 45 +++++++++++++++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/intercept.py b/intercept.py
index cc05847..dca6561 100755
--- a/intercept.py
+++ b/intercept.py
@@ -12476,11 +12476,12 @@ def satellite_dashboard():
             position: relative;
             z-index: 10;
             display: grid;
-            grid-template-columns: 1fr 1fr 420px;
-            grid-template-rows: auto 1fr;
+            grid-template-columns: 1fr 1fr 380px;
+            grid-template-rows: 1fr;
             gap: 20px;
             padding: 20px;
             height: calc(100vh - 80px);
+            min-height: 600px;
         }
 
         /* Panels */
@@ -12539,7 +12540,7 @@ def satellite_dashboard():
         /* Polar plot */
         .polar-container {
             grid-column: 1;
-            grid-row: 1 / 3;
+            grid-row: 1;
         }
 
         #polarPlot {
@@ -12551,7 +12552,7 @@ def satellite_dashboard():
         /* Ground track map */
         .map-container {
             grid-column: 2;
-            grid-row: 1 / 3;
+            grid-row: 1;
         }
 
         #groundMap {
@@ -12564,14 +12565,18 @@ def satellite_dashboard():
         /* Right sidebar */
         .sidebar {
             grid-column: 3;
-            grid-row: 1 / 3;
+            grid-row: 1;
             display: flex;
             flex-direction: column;
-            gap: 15px;
+            gap: 12px;
             overflow-y: auto;
             padding-right: 5px;
         }
 
+        .sidebar .panel {
+            flex-shrink: 0;
+        }
+
         /* Countdown panel */
         .countdown-panel {
             background: linear-gradient(135deg, rgba(0,212,255,0.1) 0%, rgba(0,255,136,0.05) 100%);
@@ -12901,10 +12906,21 @@ def satellite_dashboard():
             border-radius: 3px;
         }
 
-        /* Responsive */
-        @media (max-width: 1600px) {
+        /* Responsive - only kick in on smaller screens */
+        @media (max-width: 1200px) {
             .dashboard {
                 grid-template-columns: 1fr 1fr;
+                grid-template-rows: 1fr auto;
+                height: auto;
+                min-height: 100vh;
+            }
+            .polar-container {
+                grid-column: 1;
+                grid-row: 1;
+            }
+            .map-container {
+                grid-column: 2;
+                grid-row: 1;
             }
             .sidebar {
                 grid-column: 1 / 3;
@@ -12915,26 +12931,27 @@ def satellite_dashboard():
                 max-height: none;
             }
             .sidebar .panel {
-                flex: 1;
-                min-width: 300px;
-                max-height: 300px;
+                flex: 1 1 280px;
+                max-height: 280px;
             }
         }
 
-        @media (max-width: 1000px) {
+        @media (max-width: 800px) {
             .dashboard {
                 grid-template-columns: 1fr;
-                height: auto;
+                grid-template-rows: auto;
             }
             .polar-container, .map-container {
                 grid-column: 1;
-                min-height: 350px;
+                min-height: 300px;
             }
             .sidebar {
                 grid-column: 1;
                 flex-direction: column;
             }
             .sidebar .panel {
+                flex: none;
+                max-height: none;
                 min-width: 100%;
             }
         }