Use css grid for DiskItems to avoid reordering

dashboard/src/components/DiskUsage.vue

@@ -31,13 +31,18 @@ onMounted(async () => {
 <style scoped>
 
 .filesystems-grid {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
   height: 100%;
   width: 100%;
   transition: 300ms;
-  flex-wrap: wrap;
-  justify-content: start;
-  align-content: start;
+}
+
+@media (max-width: 576px) {
+  .filesystems-grid {
+    grid-template-columns: 1fr; /* Single column on small screens */
+  }
 }
 
 .usage-bar {

dashboard/src/components/DiskUsageItem.vue

@@ -142,7 +142,7 @@ onUnmounted(() => {
         <div class="disk-used" v-for="content in contents" :key="content.id" v-tooltip="content.id" @mouseover="highlight = content.id" :style="{ 'background-color': content.color, width: 100*content.usage/filesystem.size + '%' }" :class="{ highlight: highlight === content.id }"></div>
       </div>
 
-      <div v-if="percent < 100" style="text-align: center; margin-top: 10px;">Calculating speed and disk usage ... {{ percent }}%</div>
+      <div v-if="percent < 100" style="text-align: center; margin-top: 10px;">Calculating speed and disk usage ... {{ parseInt(percent) }}%</div>
       <div v-else>
         <table style="width: 100%">
           <tr v-for="content in contents" :key="content.id" @mouseover="highlight = content.id" :class="{ highlight: highlight === content.id }">
@@ -169,8 +169,6 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin: 10px;
-  max-width: 620px;
   padding: 10px 16px;
   overflow: hidden;
   border-radius: 10px;