From deedc2fad375387fd33194db374c44cc9ca89d9b Mon Sep 17 00:00:00 2001
From: Greg <trystuffwospam@livingonlinenow.com>
Date: Sat, 10 May 2025 22:53:50 +0200
Subject: [PATCH] Reports side by side

---
 templates/reports.html | 45 +++++++++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 9 deletions(-)
diff --git a/templates/reports.html b/templates/reports.html
index aef9aa3..019c168 100644
--- a/templates/reports.html
+++ b/templates/reports.html
@@ -6,22 +6,49 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
         body { font-family: Arial, sans-serif; background: #222831; color: #DFD0B8; margin: 2em; }
-        .chart-container { background: #393E46; padding: 2em; border-radius: 8px; margin-bottom: 2em; }
-        h2 { color: #948979; }
+        .charts-flex {
+            display: flex;
+            gap: 2em;
+            justify-content: center;
+            align-items: flex-start;
+            flex-wrap: wrap;
+        }
+        .chart-container.small-chart {
+            background: #393E46;
+            padding: 1em 1.2em;
+            border-radius: 8px;
+            margin-bottom: 1em;
+            min-width: 320px;
+            max-width: 350px;
+            flex: 1 1 320px;
+            box-sizing: border-box;
+        }
+        .chart-container.small-chart canvas {
+            max-width: 100%;
+            height: 260px !important;
+            width: 100% !important;
+        }
+        h2 { color: #948979; font-size: 1.1em; margin-bottom: 0.5em; }
         a, button { color: #222831; background: #948979; border: none; padding: 0.7em 1.5em; border-radius: 4px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer; text-decoration: none; }
         a:hover, button:hover { background: #7c765c; }
+        @media (max-width: 900px) {
+            .charts-flex { flex-direction: column; align-items: stretch; }
+            .chart-container.small-chart { max-width: 100%; min-width: 0; }
+        }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
     <a href="/" style="margin-bottom: 2em; display: inline-block;">Back to Attendance</a>
-    <div class="chart-container">
-        <h2>Attendance Count per Player</h2>
-        <canvas id="barChart"></canvas>
-    </div>
-    <div class="chart-container">
-        <h2>Player Attendance Share (Pie)</h2>
-        <canvas id="pieChart"></canvas>
+    <div class="charts-flex">
+        <div class="chart-container small-chart">
+            <h2>Attendance Count per Player</h2>
+            <canvas id="barChart" width="300" height="300"></canvas>
+        </div>
+        <div class="chart-container small-chart">
+            <h2>Player Attendance Share (Pie)</h2>
+            <canvas id="pieChart" width="300" height="300"></canvas>
+        </div>
     </div>
     <script>
     fetch('/api/data').then(r => r.json()).then(data => {
