fix(dashboard): make charts look better in portrait mode

ravenclaw900 · Nov 27, 2021 · 0773943 · 0773943
1 parent 592cdfd
commit 0773943
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/src/frontend/.yarn/install-state.gz b/src/frontend/.yarn/install-state.gz
diff --git 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>