Cap chart and map height to prevent vertical scrolling on smaller screens

Author: pierres

src/components/country-map.scss

@@ -12,5 +12,14 @@
 
 country-map {
     display: block;
+    // Reserve space before svgmap loads to avoid layout shift
     aspect-ratio: auto 2 / 1;
+    // 550px: comfortable max on large screens (leaves room for navbar, heading, footer on 900px viewports)
+    // 65dvh: viewport-relative cap so the map never causes vertical scrolling
+    max-height: min(550px, 65dvh);
+
+    // Propagate max-height into svgmap's padding-based layout
+    .svgMap-map-wrapper {
+        max-height: inherit;
+    }
 }

src/components/popularity-chart.scss

@@ -1,6 +1,8 @@
 popularity-chart {
     display: block;
-    aspect-ratio: auto 16 / 9;
+    // 600px: comfortable max on large screens (leaves room for navbar, heading, footer on 900px viewports)
+    // 65dvh: viewport-relative cap so the chart never causes vertical scrolling
+    height: min(600px, 65dvh);
 
     // prevent scroll bars during graph rendering
     canvas {

src/components/popularity-chart.ts

@@ -87,6 +87,7 @@ class PopularityChart extends HTMLElement {
             type: "line",
             data,
             options: {
+                maintainAspectRatio: false,
                 interaction: {
                     mode: "index",
                     intersect: false,