From 35c874da522053c6ebac49f6dcdd87417d67ab40 Mon Sep 17 00:00:00 2001
From: James Smith <jsmith@Jamess-MBP.Home>
Date: Thu, 19 Mar 2026 23:33:17 +0000
Subject: [PATCH] Stretch sky view to fill right column height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- command-rail last row changed from minmax(260px, 340px) to 1fr so the
  polar plot expands to fill whatever vertical space remains after the
  Next Pass and Live Telemetry panels
- polar-container made flex-column so panel-content can grow with flex: 1
- #polarPlot width/height 100% with aspect-ratio 1/1 — canvas fills the
  available square area and stays proportional
- Remove align-items: start from the 1320px breakpoint primary-layout so
  the command-rail stretches to match map height in the two-column layout
- Fix matching 2-column command-rail rows at 1320px breakpoint

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/satellite_dashboard.css | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css
index 2da3f22..3f9a327 100644
--- a/static/css/satellite_dashboard.css
+++ b/static/css/satellite_dashboard.css
@@ -292,11 +292,9 @@ body {
 
 .command-rail {
     display: grid;
-    grid-template-rows: auto auto auto minmax(260px, 340px);
+    grid-template-rows: auto auto auto 1fr;
     gap: 6px;
     min-width: 0;
-    align-items: start;
-    align-content: start;
 }
 
 .data-grid {
@@ -737,22 +735,27 @@ body {
 
 /* Polar plot */
 .polar-container {
-    min-height: 0;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
 }
 
 .polar-container .panel-content {
+    flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 8px;
-    height: auto;
+    min-height: 0;
     overflow: hidden;
 }
 
 #polarPlot {
     display: block;
     width: 100%;
-    max-width: 300px;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
     aspect-ratio: 1 / 1;
 }
 
@@ -1536,7 +1539,6 @@ body {
 @media (max-width: 1320px) {
     .primary-layout {
         grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
-        align-items: start;
     }
 
     .mission-drawer {
@@ -1553,7 +1555,7 @@ body {
         grid-column: 2;
         grid-row: 2;
         grid-template-columns: repeat(2, minmax(0, 1fr));
-        grid-template-rows: auto minmax(260px, 320px);
+        grid-template-rows: auto 1fr;
     }
 }