From 46eee9e642fba0355d21a3f7859f3f0d09474e6b Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Tue, 11 Mar 2025 12:33:45 -0700
Subject: [PATCH] refactor: Improve chart responsiveness with dynamic mobile
 height

---
 aider/website/_includes/blame.md | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/aider/website/_includes/blame.md b/aider/website/_includes/blame.md
index 61758a7db..7a02a6e53 100644
--- a/aider/website/_includes/blame.md
+++ b/aider/website/_includes/blame.md
@@ -9,7 +9,7 @@
 .chart-container {
     position: relative;
     width: 100%;
-    height: 300px;
+    min-height: 300px;
 }
 </style>
 
@@ -18,8 +18,21 @@
 <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-    var blameCtx = document.getElementById('blameChart').getContext('2d');
-    var linesCtx = document.getElementById('linesChart').getContext('2d');
+    var blameCanvas = document.getElementById('blameChart');
+    var linesCanvas = document.getElementById('linesChart');
+    var blameCtx = blameCanvas.getContext('2d');
+    var linesCtx = linesCanvas.getContext('2d');
+    
+    function getChartHeight() {
+        var width = window.innerWidth;
+        // For mobile (smaller screens), make charts taller
+        return width < 768 ? 400 : 300;
+    }
+    
+    // Set initial heights
+    document.querySelectorAll('.chart-container').forEach(function(container) {
+        container.style.height = getChartHeight() + 'px';
+    });
     
     var labels = [{% for row in site.data.blame %}'{{ row.end_tag }}',{% endfor %}];
     
@@ -154,5 +167,15 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         }
     });
+    
+    // Handle window resize
+    window.addEventListener('resize', function() {
+        var newHeight = getChartHeight();
+        document.querySelectorAll('.chart-container').forEach(function(container) {
+            container.style.height = newHeight + 'px';
+        });
+        blameChart.resize();
+        linesChart.resize();
+    });
 });
 </script>