1 files changed, 32 insertions, 38 deletions
diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
index 8ee23f5..59bccda 100644
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/src/tools/eta-calculator/eta-calculator.vue
@@ -6,46 +6,40 @@
       {{ endAt }}.
     </n-text>
     <n-divider />
-    <n-space item-style="flex:1 1 0">
-      <div>
-        <n-space item-style="flex:1 1 0">
-          <n-form-item label="Amount of element to consume">
-            <n-input-number v-model:value="unitCount" :min="1" />
-          </n-form-item>
-          <n-form-item label="The consumption started at">
-            <n-date-picker v-model:value="startedAt" type="datetime" />
-          </n-form-item>
-        </n-space>
+    <div flex gap-2>
+      <n-form-item label="Amount of element to consume" flex-1>
+        <n-input-number v-model:value="unitCount" :min="1" />
+      </n-form-item>
+      <n-form-item label="The consumption started at" flex-1>
+        <n-date-picker v-model:value="startedAt" type="datetime" />
+      </n-form-item>
+    </div>
 
-        <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
-          <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
-          <span style="margin: 0 10px">in</span>
-          <n-input-group>
-            <n-input-number v-model:value="timeSpan" :min="1" />
-            <n-select
-              v-model:value="timeSpanUnitMultiplier"
-              :options="[
-                { label: 'milliseconds', value: 1 },
-                { label: 'seconds', value: 1000 },
-                { label: 'minutes', value: 1000 * 60 },
-                { label: 'hours', value: 1000 * 60 * 60 },
-                { label: 'days', value: 1000 * 60 * 60 * 24 },
-              ]"
-            ></n-select>
-          </n-input-group>
-        </n-form-item>
+    <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+      <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
+      <span mx-3>in</span>
+      <n-input-group>
+        <n-input-number v-model:value="timeSpan" :min="1" />
+        <n-select
+          v-model:value="timeSpanUnitMultiplier"
+          :options="[
+            { label: 'milliseconds', value: 1 },
+            { label: 'seconds', value: 1000 },
+            { label: 'minutes', value: 1000 * 60 },
+            { label: 'hours', value: 1000 * 60 * 60 },
+            { label: 'days', value: 1000 * 60 * 60 * 24 },
+          ]"
+        ></n-select>
+      </n-input-group>
+    </n-form-item>
 
-        <n-divider />
-        <n-space vertical>
-          <c-card>
-            <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
-          </c-card>
-          <c-card>
-            <n-statistic label="It will end ">{{ endAt }}</n-statistic>
-          </c-card>
-        </n-space>
-      </div>
-    </n-space>
+    <n-divider />
+    <c-card mb-2>
+      <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
+    </c-card>
+    <c-card>
+      <n-statistic label="It will end ">{{ endAt }}</n-statistic>
+    </c-card>
   </div>
 </template>