From 97794ce7c589f68e6586a3dfc92f573b28f65ccc Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Mon, 12 Feb 2024 04:49:02 -0500
Subject: [PATCH] [S] Responsive chart

---
 AquaNet/src/pages/UserHome.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 7b2e1ec7..7f996efc 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -64,7 +64,9 @@
           </div>
 
           <div class="trend">
-            <Line data={{
+            <!-- ChartJS cannot be fully responsive unless there is a parent div that's independent from its size and helps it determine its size -->
+            <div class="chartjs-box-reference">
+              <Line data={{
               datasets: [
                 {
                   label: 'Rating',
@@ -76,6 +78,7 @@
                 }
               ]
             }} options={CHARTJS_OPT} />
+            </div>
           </div>
 
           <div class="info-bottom">
@@ -259,6 +262,12 @@ $gap: 20px
       width: 100%
       max-width: 790px
 
+      position: relative
+
+      > .chartjs-box-reference
+        position: absolute
+        inset: 0
+
     @media (max-width: $w-mobile)
       flex-direction: column
       max-height: unset