Fix chart aspect ratio for mobile devices
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m1s
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m1s
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>
This commit is contained in:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user