From 515bd0f806ad828c756e748a44208a4716b3e8d9 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Mon, 2 Feb 2026 16:13:27 +0800
Subject: [PATCH] Fixed #913

---
 .../app/src/components/systemStatusComponents/cpuCore.vue     | 1 -
 .../components/systemStatusComponents/systemStatusWidget.vue  | 4 ++--
 src/static/app/src/views/systemStatus.vue                     | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/static/app/src/components/systemStatusComponents/cpuCore.vue b/src/static/app/src/components/systemStatusComponents/cpuCore.vue
index 786dd580..b830478c 100644
--- a/src/static/app/src/components/systemStatusComponents/cpuCore.vue
+++ b/src/static/app/src/components/systemStatusComponents/cpuCore.vue
@@ -20,7 +20,6 @@ const squareHeight = computed(() => {
 
 <template>
 	<div class="flex-grow-1 square rounded-3 border position-relative p-2"
-	     
 	     @mouseenter="show = true"
 	     @mouseleave="show = false"
 	     :style="{'background-color': `rgb(13 110 253 / ${percentage*10}%)`}">
diff --git a/src/static/app/src/components/systemStatusComponents/systemStatusWidget.vue b/src/static/app/src/components/systemStatusComponents/systemStatusWidget.vue
index 0acd528e..c5c56de0 100644
--- a/src/static/app/src/components/systemStatusComponents/systemStatusWidget.vue
+++ b/src/static/app/src/components/systemStatusComponents/systemStatusWidget.vue
@@ -49,7 +49,7 @@ const data = computed(() => {
 			<div class="progress" role="progressbar" style="height: 6px">
 				<div class="progress-bar" :style="{width: `${data?.CPU.cpu_percent}%` }"></div>
 			</div>
-			<div class="d-flex mt-2 gap-1">
+			<div class="d-grid mt-2 gap-1" style="grid-template-columns: repeat(10, 1fr)">
 				<CpuCore
 					v-for="(cpu, count) in data?.CPU.cpu_percent_per_cpu"
 				         :key="count"
@@ -74,7 +74,7 @@ const data = computed(() => {
 			<div class="progress" role="progressbar" style="height: 6px">
 				<div class="progress-bar bg-success" :style="{width: `${data?.Disks.find(x => x.mountPoint === '/') ? data?.Disks.find(x => x.mountPoint === '/').percent : data?.Disks[0].percent}%` }"></div>
 			</div>
-			<div class="d-flex mt-2 gap-1">
+			<div class="d-grid mt-2 gap-1" style="grid-template-columns: repeat(10, 1fr)">
 				<StorageMount v-for="(disk, count) in data?.Disks"
 				              v-if="data"
 				              :key="disk.mountPoint"
diff --git a/src/static/app/src/views/systemStatus.vue b/src/static/app/src/views/systemStatus.vue
index 03ceacd8..4972782c 100644
--- a/src/static/app/src/views/systemStatus.vue
+++ b/src/static/app/src/views/systemStatus.vue
@@ -176,7 +176,7 @@ const memoryHistoricalChartData = computed(() => {
 		<div class="card rounded-3 h-100 shadow">
 			<div class="card-body p-4">
 				<div class="d-flex flex-column gap-3">
-					<div class="d-flex flex-column gap-3" style="height: 130px">
+					<div class="d-flex flex-column gap-3" style="min-height: 130px">
 						<div class="d-flex align-items-center">
 							<h3 class="text-muted mb-0">
 								<i class="bi bi-cpu-fill me-2"></i>
@@ -192,7 +192,7 @@ const memoryHistoricalChartData = computed(() => {
 						<div class="progress" role="progressbar" style="height: 10px">
 							<div class="progress-bar" :style="{width: `${data?.CPU.cpu_percent}%` }"></div>
 						</div>
-						<div class="d-flex gap-1">
+						<div class="d-grid gap-1" style="grid-template-columns: repeat(10, 1fr)">
 							<CpuCore
 								v-for="(cpu, count) in data?.CPU.cpu_percent_per_cpu"
 								:square="true"