From 0773943aae9b57bbc429ae86098a8d7049c3d755 Mon Sep 17 00:00:00 2001
From: ravenclaw900 <50060110+ravenclaw900@users.noreply.github.com>
Date: Sat, 27 Nov 2021 08:59:53 -0600
Subject: [PATCH] fix(dashboard): make charts look better in portrait mode

---
 src/frontend/.yarn/install-state.gz | Bin 184194 -> 184197 bytes
 src/frontend/src/pages/Home.svelte  |  21 ++++++++-------------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/frontend/.yarn/install-state.gz b/src/frontend/.yarn/install-state.gz
index a8f660940caf6084e6ebed4384efae816114126a..101014b450c8e9fb7a7310998ad7f66912ba2703 100644
GIT binary patch
delta 748
zcmV<I0u%j$p9_Vb3kn~L2mk;800003feM8R0ksMOu*`qxN4{$XHfcu<f8I95B@L5l
zOx7pItYH<~9OI{ib}^>px~thrd-7;7XtN6+<L$Uh)k^ZW7;pEr;Nfe9pjPv3q2&5D
zDRYu4)Wu6`G462EHZ`ln;*5A`Q=4hV28(6kOHyGaUZwn9RwqY`?aD<0sH*JELco&C
zFser=n$>@@jSl2+#Hf>=Zf8&rvDzrW>p`P0f+Vhm&RE0BBX~*FgCI3^h~F<&!X7mT
zuI{B1XslnEScTL;HR)%}EiD4pN8&>}OUialH#A0&P4IZLCw-{&2>%9dn?jn{%a&?X
z@8ASvBSDV;V%3hkrn73vlt{p)v#CJwMwUwC1`>aEER|olVoNSZ)mmv<XjTj}GK`2>
zTSWrEC4rX=MDS$;)#hjTyiy@5iS-9LWQ}54lI&({*23y----~tqN?4(>PhDlVH^s+
zR;QbW4RC4@EH!GZYfaIGqgb!5Qa3Op5qj$I#??j6oZ2YYO746-U`JK6#OiI9k#G+F
z=A?hjxcyO|Zb86#9hEWj*e+-MQ6ZLA^~GZ>m_3oGNW-um0z_D00B?hv7M39)mtA^I
zQ@_WNa|^Bjo;k!qEN&LMUbc9TndhK3AfvCq+2Y8Ph<3<@90e%}Zc^*eh1QCSc)3cR
z%19aBbrq>hO;I1aY-J!Tzat78#R8Ic)R2Fda0nv=75W-UEzB}i^W?oH=-`&RN5WV=
zZ_f&BWq%BLlSlLjM3`Z59b*^4BPkStLO}acWLIrV(5;2lAdT1wwb@M*B$o*&h8-;x
zAS7Iuf8gf55#1KXq!X!h*iz&9Yb;4KX>k%hYD?hK==Q$KDcdmyq;K#`F}4l8%ZgAM
zsmFf|NDtPQ2vQg&d+xK5iVC~Z2%RvSsac(>Gv~KkmA-jio$LUQY*FP?BtEjK(KPR|
ekNQ2QvT{I}+MY&#|D7NH{QnEJp_^fDVF&;ok7I2B

delta 745
zcmV<F0v7#+p9_MY3kn~L2mk;80000JfeM8R0ksMOu*`o*b1N{bsD6f#N6Km&Q-`g_
zo26E~)nLOq3eXJj6*WhFvVx)SEQuIivS$@3;0OY_s?8y0k!Hw-HI@#A&t$x*acc|5
z#IE^QGdz8nkb84DX`7l=VsS=1w5iQBV}r%A@Fl6R60cJJE~}HH#dhT)0aR7?)<-#&
zPpclGXjXsAHad{Q5u;9ex}8Bi#A>4euLq632$HxKI%5s%(JS7XiVrjxr2|m|;bD{C
z@D#R3zgWJ{TW-QKD1_y9gp?fTR158)gP3)wkgMk9trZTj0)7A*ZPg%dB=c7d^jyT-
z?-Vr#!4hT^{Exh*vueqdNWiAEsX*~YmP+IX5_W$qb+xkCAeW<Rtu!q(D~1^vM#QYG
zA_3r%z)J=q_{N;n=4bf4QXwh{_vCrAMlmf(c6T0fVfD6eJp!>2KhV@0JwZ~L(b5I*
z5snJ`3WiaQf`&16*2{#V>mcAR>q>s=2Q=Hd36YS~5F{R|{lG#4Ka3SebpSUB877HF
zxZ{7|6ZXPlWgWNSTZ07)tQT&R<b>p3aIUn-Rn-x6UT-x*B6fmIcGCn2MFI!m1xr`&
zDY3rb0pcvbiM$UrnodbZedl`_EHh~uE9SvRZAm*C-CI{DkLdlVK#i)8TF@d5odA*#
z{h4j;RRz%rE;x1Sue9E*3Z!h(XhccD2jzbN0YQl&gN%3~RcbAG3wB8aJ?8sl0;|ej
zZP74MXCx;J9yscQ=3%tX_@hpax5xi*OMZ@cT%_b!4;dys5v&9B$odt@+3eCQk1<Vg
zAdf;o0M#9mDVAUpy0*OVdu_@=%}_>Pfw{)P8trt5rsxs2s<E8YD;nUUB9uyPmS#<O
zu>2$9cZ(gZB{WGu!Dm1@g}(qf+dfy<k-e_qh?^Q03DYwwL2tO9BZ6A6fUGvVy7>jk
bN}__N2|Rnv@4xfIpZ|XWnw1%$Zea)jVI5Wt

diff --git a/src/frontend/src/pages/Home.svelte b/src/frontend/src/pages/Home.svelte
index dbf21e35..852d6e57 100644
--- a/src/frontend/src/pages/Home.svelte
+++ b/src/frontend/src/pages/Home.svelte
@@ -145,7 +145,8 @@
         },
     };
 
-    let portrait = window.innerHeight > window.innerWidth;
+    let portrait;
+    $: portrait = window.innerHeight > window.innerWidth;
 
     let ramData, swapData, diskData;
 
@@ -201,7 +202,12 @@
         : ' md:flex-row'} flex-grow"
 >
     <Card header="System Diagnostics">
-        <div id="chartWrapper">
+        <div
+            id="chartWrapper"
+            class={portrait
+                ? "w-70vw min-w-full h-50vh"
+                : "max-w-full h-70vh max-h-95%"}
+        >
             <canvas bind:this={canvas} />
         </div>
     </Card>
@@ -232,14 +238,3 @@
         </Card>
     {/if}
 </main>
-
-<style>
-    #chartWrapper {
-        max-width: 100%;
-        min-width: 0;
-        width: 85vw;
-        max-height: 95%;
-        min-height: 0;
-        height: 70vh;
-    }
-</style>