From 9af8d471a6dc74c455df60fb27906f80f1cf2def Mon Sep 17 00:00:00 2001
From: Tudor <tudor.sitaru@gmail.com>
Date: Wed, 7 Jan 2026 15:32:22 +0000
Subject: [PATCH] Fix chart aspect ratio for mobile devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add dynamic aspect ratio that adjusts based on screen width,
using 1.2 on mobile (<=768px) vs 2 on desktop to prevent
flat/compressed charts on smaller screens.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/app.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index bc53bf4..dddde62 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -48,6 +48,11 @@ const CHART_COLORS = [
   "#9b59b6", // violet
 ];
 
+// Helper to get chart aspect ratio based on screen size
+function getChartAspectRatio() {
+  return window.innerWidth <= 768 ? 1.2 : 2;
+}
+
 // =============================================================================
 // DOM ELEMENTS
 // =============================================================================
@@ -804,7 +809,7 @@ async function updateComparisonChart() {
     options: {
       responsive: true,
       maintainAspectRatio: true,
-      aspectRatio: 2,
+      aspectRatio: getChartAspectRatio(),
       plugins: {
         legend: {
           position: "bottom",
@@ -1068,7 +1073,7 @@ async function openSchoolModal(urn) {
     options: {
       responsive: true,
       maintainAspectRatio: true,
-      aspectRatio: 2,
+      aspectRatio: getChartAspectRatio(),
       plugins: {
         legend: {
           position: "bottom",