recorder: fix chart sizing

stweedo · stweedo · commit 8735033158c3 · 2025-06-23T15:38:44.000-05:00
diff --git a/apps/recorder/interface.html b/apps/recorder/interface.html
@@ -4,9 +4,21 @@
     <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%;
+        max-width: 600px;
         aspect-ratio: 1/1;
+        margin: 0 auto;
+      }
+      .chart-canvas {
+        width: 100%;
+        aspect-ratio: 1/1;
+      }
+      .chart-wrapper {
+        width: 100%;
+        max-width: 600px;
+        aspect-ratio: 1/1;
+        margin: 0 auto;
       }
       .leaflet-map, .chart-container {
         border-radius: 4px;
@@ -35,9 +47,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; }
@@ -49,6 +61,7 @@
       .accordion-header { cursor: pointer; padding: 10px; background: #f8f9fa; border-radius: 4px; margin-bottom: 5px; }
       .accordion-header:hover { background: #e9ecef; }
       .track-loading { text-align: center; padding: 20px; color: #666; }
+      body { margin: 0; }
     </style>
   </head>
   <body>
