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>
This commit is contained in:
James Smith
2026-03-19 23:17:35 +00:00
parent 72d4fab25e
commit ad4a4db160
2 changed files with 12 additions and 16 deletions

View File

@@ -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;