From c3d37f0243b09e1a51cf3456f057e7226b43da1f Mon Sep 17 00:00:00 2001
From: sstent <stuart.stent@gmail.com>
Date: Sun, 5 Oct 2025 06:37:26 -0700
Subject: [PATCH] fixing chart dimensions

---
 templates/charts.html | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/templates/charts.html b/templates/charts.html
index a02a687..afae7be 100644
--- a/templates/charts.html
+++ b/templates/charts.html
@@ -3,32 +3,36 @@
 {% block title %}Daily Calories Chart{% endblock %}
 
 {% block content %}
-<div class="container mt-4">
+<div class="container mt-4 d-flex flex-column min-vh-100">
     <h2><i class="bi bi-graph-up"></i> Daily Calories Chart</h2>
     
     <div class="row mb-4">
         <div class="col-md-6">
             <div class="card">
                 <div class="card-body">
-                    <label for="daysSelect" class="form-label">Select Time Period:</label>
-                    <select class="form-select" id="daysSelect">
-                        <option value="7">Past 7 Days</option>
-                        <option value="30">Past 30 Days</option>
-                    </select>
-                    <button class="btn btn-primary mt-2" id="loadChartBtn">Load Chart</button>
+                    <div class="d-flex align-items-center flex-wrap gap-2">
+                        <label for="daysSelect" class="form-label mb-0 me-2">Select Time Period:</label>
+                        <select class="form-select w-auto" id="daysSelect">
+                            <option value="7">Past 7 Days</option>
+                            <option value="30">Past 30 Days</option>
+                        </select>
+                        <button class="btn btn-primary" id="loadChartBtn">Load Chart</button>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
     
-    <div class="row">
-        <div class="col-md-12">
-            <div class="card">
+    <div class="row flex-grow-1">
+        <div class="col-md-12 h-100">
+            <div class="card h-100">
                 <div class="card-header">
                     <h5 class="mb-0">Calories Consumed</h5>
                 </div>
-                <div class="card-body">
-                    <canvas id="caloriesChart" width="400" height="200"></canvas>
+                <div class="card-body p-2 h-100">
+                    <div class="position-relative h-100">
+                        <canvas id="caloriesChart" class="w-100 h-100"></canvas>
+                    </div>
                 </div>
             </div>
         </div>
@@ -81,6 +85,7 @@
                         },
                         options: {
                             responsive: true,
+                            maintainAspectRatio: false,
                             scales: {
                                 y: {
                                     beginAtZero: true,