From 123d38d295530c07dc53c4121bfbcafa89045b08 Mon Sep 17 00:00:00 2001 From: James Smith Date: Thu, 19 Mar 2026 23:35:34 +0000 Subject: [PATCH] =?UTF-8?q?Fix=20oval=20polar=20plot=20=E2=80=94=20remove?= =?UTF-8?q?=20height:100%=20that=20overrode=20aspect-ratio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Setting both width:100% and height:100% made CSS ignore aspect-ratio, stretching the drawing buffer non-uniformly into the tall container. Fixed by keeping only width:100% + max-height:100% so aspect-ratio:1/1 clamps the height and the element stays square. Draw functions now use canvas.offsetWidth for the square buffer size. Co-Authored-By: Claude Sonnet 4.6 --- static/css/satellite_dashboard.css | 2 -- templates/satellite_dashboard.html | 6 ++---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css index 3f9a327..83c7a6c 100644 --- a/static/css/satellite_dashboard.css +++ b/static/css/satellite_dashboard.css @@ -753,8 +753,6 @@ body { #polarPlot { display: block; width: 100%; - height: 100%; - max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; } diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html index 5406a86..cd19d8b 100644 --- a/templates/satellite_dashboard.html +++ b/templates/satellite_dashboard.html @@ -2289,8 +2289,7 @@ function drawPolarPlot(pass) { const canvas = document.getElementById('polarPlot'); const ctx = canvas.getContext('2d'); - const rect = canvas.getBoundingClientRect(); - const size = Math.round(Math.min(rect.width, rect.height || rect.width)); + const size = canvas.offsetWidth || 300; canvas.width = size; canvas.height = size; @@ -2518,8 +2517,7 @@ function drawPolarPlotWithPosition(az, el, color) { const canvas = document.getElementById('polarPlot'); const ctx = canvas.getContext('2d'); - const rect = canvas.getBoundingClientRect(); - const size = Math.round(Math.min(rect.width, rect.height || rect.width)); + const size = canvas.offsetWidth || 300; canvas.width = size; canvas.height = size;