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;