recorder: fix chart sizing

Author: stweedo

apps/recorder/interface.html

@@ -4,10 +4,18 @@
     <link rel="stylesheet" href="../../css/spectre-icons.min.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
-      .leaflet-map, .chart-canvas, .chart-wrapper {
+      .leaflet-map {
         width: 100%;
         aspect-ratio: 1/1;
       }
+      .chart-canvas {
+        width: 100%;
+        display: block;
+      }
+      .chart-wrapper {
+        width: 100%;
+        position: relative;
+      }
       .leaflet-map, .chart-container {
         border-radius: 4px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -35,9 +43,9 @@
       .chart-header:hover { background: #e9ecef; }
       .chart-title { font-weight: 600; color: #333; margin: 0; }
       .chart-toggle { float: right; font-size: 14px; color: #666; }
-      .chart-content { padding: 15px; overflow: hidden; }
+      .chart-content { padding: 15px; }
       .chart-content.collapsed { display: none; }
-      .chart-canvas { margin-bottom: 10px; }
+      .chart-wrapper { margin-bottom: 10px; }
       .chart-export { text-align: right; margin-top: 10px; }
       .chart-export button { font-size: 0.85em; padding: 4px 8px; }
       .no-data-message { text-align: center; color: #666; font-style: italic; padding: 20px; }
@@ -339,7 +347,17 @@
   requestAnimationFrame(() => {
     availableCharts.forEach(({ type, id }) => {
       try {
-        trackCharts[trackNumber][id] = createChart(type, `canvas-${id}-${trackNumber}`, trackData);
+        const chart = createChart(type, `canvas-${id}-${trackNumber}`, trackData);
+        trackCharts[trackNumber][id] = chart;
+        
+        // Set canvas height to match its width for square charts
+        if (chart) {
+          const canvas = document.getElementById(`canvas-${id}-${trackNumber}`);
+          if (canvas) {
+            canvas.style.height = canvas.offsetWidth + 'px';
+            chart.resize();
+          }
+        }
       } catch (e) {
         console.error(`Error creating ${type} chart:`, e);
       }