Fix hardwareChart on small screens

content/sv/status/index.md

@@ -27,7 +27,7 @@ src="https://dash.roslund.cloud/render/d-solo/aedo2cbpvy800a/sthlm-mesh?orgId=1&
 
 ## Hårdvarumodeller
 Antalet enheter av respektive hårdvarutyp som synts i meshet de senaste 30 dagarna.
-<div style="width: 100%;max-width: 1000px;">
+<div id="hardwareChartContainer" style="width: 100%;max-width: 1000px;">
     <canvas id="hardwareChart"></canvas>
 </div>
 

static/js/status/hardwareChart.js

@@ -27,6 +27,9 @@ async function hardwareStatsGraph() {
         const counts = data.hardware_model_stats.map(item => item.count);
         const colors = labels.map(name => stringToColor(name));
 
+        // Adjust chart height based on number of items
+        const chartContainer = document.querySelector('#hardwareChartContainer');
+        chartContainer.style.height = `${labels.length * 25}px`;
 
 
         new Chart(ctx, {
@@ -41,6 +44,8 @@ async function hardwareStatsGraph() {
                 }]
             },
             options: {
+                responsive: true,
+                maintainAspectRatio: false,
                 barPercentage: 0.8,
                 indexAxis: 'y',
                 y: { ticks: { autoSkip: false, font: { size: 12 } } },