From ad4a4db16022e78eac3ea5194e7ee9b469bd230a Mon Sep 17 00:00:00 2001
From: James Smith <jsmith@Jamess-MBP.Home>
Date: Thu, 19 Mar 2026 23:17:35 +0000
Subject: [PATCH] Fix squashed sky view polar plot and eliminate wasted space

- Remove align-self: start from .polar-container so the grid row's
  minmax(260px, 340px) height is actually respected
- Switch #polarPlot to aspect-ratio: 1/1 so the canvas is always square
- Fix both draw functions to size canvas from getBoundingClientRect on
  the canvas itself (not parent) using min(width, height) for a square plot
- Remove min-height from .dashboard to prevent empty space below content
  on narrow/mobile screens where stacked panels are shorter than 720px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/satellite_dashboard.css | 14 ++++----------
 templates/satellite_dashboard.html | 14 ++++++++------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css
index 99dbf51..2da3f22 100644
--- a/static/css/satellite_dashboard.css
+++ b/static/css/satellite_dashboard.css
@@ -264,7 +264,6 @@ body {
 }
 
 /* Main dashboard grid */
-/* Header ~52px + Nav 44px = ~96px, using 100px for safety */
 .dashboard {
     position: relative;
     z-index: 10;
@@ -273,7 +272,6 @@ body {
     grid-template-rows: minmax(0, 1fr) auto auto;
     gap: 12px;
     height: auto;
-    min-height: 720px;
     padding: 12px;
 }
 
@@ -740,25 +738,22 @@ body {
 /* Polar plot */
 .polar-container {
     min-height: 0;
-    max-height: 340px;
-    align-self: start;
 }
 
 .polar-container .panel-content {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 14px;
+    padding: 8px;
+    height: auto;
     overflow: hidden;
 }
 
 #polarPlot {
     display: block;
     width: 100%;
-    height: 100%;
-    max-width: 320px;
-    max-height: 320px;
-    min-height: 0;
+    max-width: 300px;
+    aspect-ratio: 1 / 1;
 }
 
 /* Ground track map */
@@ -1566,7 +1561,6 @@ body {
     .dashboard {
         grid-template-rows: auto auto auto;
         height: auto;
-        min-height: calc(100vh - 100px);
     }
 
     .primary-layout {
diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html
index df9c559..5406a86 100644
--- a/templates/satellite_dashboard.html
+++ b/templates/satellite_dashboard.html
@@ -2289,9 +2289,10 @@
         function drawPolarPlot(pass) {
             const canvas = document.getElementById('polarPlot');
             const ctx = canvas.getContext('2d');
-            const rect = canvas.parentElement.getBoundingClientRect();
-            canvas.width = rect.width;
-            canvas.height = rect.height - 20;
+            const rect = canvas.getBoundingClientRect();
+            const size = Math.round(Math.min(rect.width, rect.height || rect.width));
+            canvas.width = size;
+            canvas.height = size;
 
             const cx = canvas.width / 2;
             const cy = canvas.height / 2;
@@ -2517,9 +2518,10 @@
         function drawPolarPlotWithPosition(az, el, color) {
             const canvas = document.getElementById('polarPlot');
             const ctx = canvas.getContext('2d');
-            const rect = canvas.parentElement.getBoundingClientRect();
-            canvas.width = rect.width;
-            canvas.height = rect.height - 20;
+            const rect = canvas.getBoundingClientRect();
+            const size = Math.round(Math.min(rect.width, rect.height || rect.width));
+            canvas.width = size;
+            canvas.height = size;
 
             const cx = canvas.width / 2;
             const cy = canvas.height / 2;