From c5ba4f356fba0adcb5355e1eb528399dfdac97a7 Mon Sep 17 00:00:00 2001
From: Rob Weber <robweberjr@gmail.com>
Date: Mon, 29 Jul 2024 13:32:13 +0000
Subject: [PATCH] use table for display

---
 src/tools/raid-calculator/raid-calculator.vue | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/tools/raid-calculator/raid-calculator.vue b/src/tools/raid-calculator/raid-calculator.vue
index d244074b..ef60166b 100644
--- a/src/tools/raid-calculator/raid-calculator.vue
+++ b/src/tools/raid-calculator/raid-calculator.vue
@@ -91,12 +91,20 @@ function formatBytes(bytes: number, decimals = 2) {
       <p v-html="raidInfo"></p>
     </c-card>
     <c-card title="Results">
-      <n-statistic label="Capacity" mb-2 v-if="inputsValid">
-        {{ calculatedCapacity }}
-      </n-statistic>
-      <n-statistic label="Fault Tolerance" mb-2 v-if="inputsValid">
-        {{ calculatedFaultTolerance }}
-      </n-statistic>
+      <n-table v-if="inputsValid">
+        <tbody>
+          <tr>
+            <td font-bold width="30%">Capacity</td>
+            <td>{{ calculatedCapacity }}</td>
+          </tr>
+          <tr>
+            <td font-bold  width="30%">Fault Tolerance</td>
+            <td :value="calculatedFaultTolerance">
+              {{ calculatedFaultTolerance }}
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
     </c-card>
   </div>
 </template>