From 283a7f4f45d3ba8d924c93ad0dc72417f48f1df2 Mon Sep 17 00:00:00 2001
From: Anton Roslund <enari@minit.nu>
Date: Fri, 28 Mar 2025 20:35:23 +0100
Subject: [PATCH] Fix hardwareChart on small screens

---
 content/sv/status/index.md        | 2 +-
 static/js/status/hardwareChart.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/content/sv/status/index.md b/content/sv/status/index.md
index c21c05c..ffb9ac4 100644
--- a/content/sv/status/index.md
+++ b/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>
 
diff --git a/static/js/status/hardwareChart.js b/static/js/status/hardwareChart.js
index bb848aa..a30a00d 100644
--- a/static/js/status/hardwareChart.js
+++ b/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 } } },