Stack graphs vertically

dashboard/src/components/SystemMetrics.vue

@@ -93,6 +93,7 @@ async function refresh() {
   };
 
   const cpuGraphOptions = {
+    maintainAspectRatio: false,
     plugins: {
       legend: false
     },
@@ -170,12 +171,9 @@ async function refresh() {
   };
 
   const memoryGraphOptions = {
+    maintainAspectRatio: false,
     plugins: {
-      legend: {
-        display: true,
-        position: 'bottom',
-        align: 'center'
-      }
+      legend: false,
     },
     scales: {
       x: {
@@ -248,16 +246,17 @@ onUnmounted(async () => {
     <template #header-buttons>
       <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
     </template>
+
     <div class="graphs">
-      <div style="position: relative; width: 400px; height: 200px;">
-        <label>{{ $t('system.cpuUsage.title') }}</label>
-        <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <label>{{ $t('system.cpuUsage.title') }}</label>
+      <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <div class="graph">
         <canvas v-show="!busy" ref="cpuGraphNode"></canvas>
       </div>
 
-      <div style="position: relative; width: 400px; height: 200px;">
-        <label>{{ $t('system.systemMemory.title') }}</label>
-        <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <label>{{ $t('system.systemMemory.title') }}</label>
+      <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <div class="graph">
         <canvas v-show="!busy" ref="memoryGraphNode"></canvas>
       </div>
     </div>
@@ -266,11 +265,14 @@ onUnmounted(async () => {
 
 <style scoped>
 
-.graphs {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: space-between;
+.graphs label {
+  margin: 16px 0;
+}
+
+.graph {
+  position: relative;
+  width: 100%;
+  height: 160px;
 }
 
 </style>