From c3fcaeac5e159f09eac9c0ade2616ca225c540f6 Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Thu, 15 Aug 2024 13:27:35 -0700
Subject: [PATCH] adjust canvas height

---
 aider/website/_includes/code-in-json-benchmark.js | 12 +++---------
 aider/website/_includes/code-in-json-syntax.js    | 14 ++++----------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/aider/website/_includes/code-in-json-benchmark.js b/aider/website/_includes/code-in-json-benchmark.js
index 0a8f75e74..8ac4b7dd3 100644
--- a/aider/website/_includes/code-in-json-benchmark.js
+++ b/aider/website/_includes/code-in-json-benchmark.js
@@ -1,6 +1,4 @@
-<div id="chartContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
-    <canvas id="passRateChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
-</div>
+<canvas id="passRateChart" width="800" height="400" style="margin-bottom: 20px"></canvas>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
@@ -109,12 +107,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Adjust chart height based on screen width
     function adjustChartHeight() {
-        var container = document.getElementById('chartContainer');
-        if (window.innerWidth < 600) {
-            container.style.paddingBottom = '75%'; // Increase height on small screens
-        } else {
-            container.style.paddingBottom = '50%'; // Default height
-        }
+      var container = document.getElementById('passRateChart');
+      container.height = 600;
     }
 
     // Call the function initially and on window resize
diff --git a/aider/website/_includes/code-in-json-syntax.js b/aider/website/_includes/code-in-json-syntax.js
index 5c0e652b1..8fdfc5ee0 100644
--- a/aider/website/_includes/code-in-json-syntax.js
+++ b/aider/website/_includes/code-in-json-syntax.js
@@ -1,7 +1,5 @@
-<div id="syntaxErrorsContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
-    <canvas id="syntaxErrorsChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
-</div>
-
+<canvas id="passRateChart" width="800" height="400" style="margin-bottom: 20px"></canvas>
+  
 <script>
 document.addEventListener('DOMContentLoaded', function () {
     var ctx = document.getElementById('syntaxErrorsChart').getContext('2d');
@@ -108,12 +106,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Adjust chart height based on screen width
     function adjustChartHeight() {
-        var container = document.getElementById('syntaxErrorsContainer');
-        if (window.innerWidth < 600) {
-            container.style.paddingBottom = '75%'; // Increase height on small screens
-        } else {
-            container.style.paddingBottom = '50%'; // Default height
-        }
+      var container = document.getElementById('passRateChart');
+      container.height = 600;
     }
 
     // Call the function initially and on window resize