From 4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sat, 27 May 2023 17:36:15 +0200
Subject: [PATCH] refactor(ui): removed all n-space

---
 src/components/ColoredCard.vue                |   4 +-
 src/components/TextareaCopyable.vue           |   4 +-
 src/components/ToolCard.vue                   |   8 +-
 src/layouts/base.layout.vue                   |   4 +-
 src/layouts/tool.layout.vue                   |   4 +-
 .../basic-auth-generator.vue                  |   4 +-
 src/tools/bcrypt/bcrypt.vue                   |   4 +-
 .../benchmark-builder/benchmark-builder.vue   |  16 +--
 .../benchmark-builder/dynamic-values.vue      |   4 +-
 src/tools/chronometer/chronometer.vue         |   4 +-
 .../crontab-generator/crontab-generator.vue   |  10 +-
 ...docker-run-to-docker-compose-converter.vue |   4 +-
 src/tools/encryption/encryption.vue           |  20 ++--
 src/tools/eta-calculator/eta-calculator.vue   |  70 ++++++------
 src/tools/hmac-generator/hmac-generator.vue   |  12 +-
 src/tools/html-entities/html-entities.vue     |   8 +-
 .../html-wysiwyg-editor/editor/menu-bar.vue   |   4 +-
 .../http-status-codes/http-status-codes.vue   |   6 +-
 .../ipv4-range-expander.vue                   | 103 +++++++++---------
 .../ipv4-subnet-calculator.vue                |   4 +-
 .../json-diff/diff-viewer/diff-viewer.vue     |   4 +-
 src/tools/json-viewer/json-viewer.vue         |   4 +-
 src/tools/jwt-parser/jwt-parser.vue           |  16 +--
 src/tools/list-converter/list-converter.vue   |   4 +-
 .../lorem-ipsum-generator.vue                 |   4 +-
 .../otp-code-generator-and-validator.vue      |   4 +-
 .../token-display.vue                         |  11 +-
 .../qr-code-generator/qr-code-generator.vue   |   4 +-
 .../random-port-generator.vue                 |   4 +-
 .../roman-numeral-converter.vue               |   8 +-
 .../rsa-key-pair-generator.vue                |   4 +-
 src/tools/slugify-string/slugify-string.vue   |   4 +-
 src/tools/sql-prettify/sql-prettify.vue       |  10 +-
 .../svg-placeholder-generator.vue             |  31 +++---
 src/tools/text-statistics/text-statistics.vue |  12 +-
 .../text-to-nato-alphabet.vue                 |  10 +-
 .../token-generator/token-generator.tool.vue  |   8 +-
 src/tools/url-encoder/url-encoder.vue         |   8 +-
 .../user-agent-result-cards.vue               |   8 +-
 src/tools/uuid-generator/uuid-generator.vue   |  13 ++-
 40 files changed, 222 insertions(+), 246 deletions(-)

diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue
index 911d1e0a..9aaf1676 100644
--- a/src/components/ColoredCard.vue
+++ b/src/components/ColoredCard.vue
@@ -1,8 +1,6 @@
 <template>
   <c-card class="colored-card">
-    <n-space justify="space-between" align="center">
-      <n-icon class="icon" size="40" :component="icon" />
-    </n-space>
+    <n-icon class="icon" size="40" :component="icon" />
     <n-h3 class="title">
       <n-ellipsis>{{ title }}</n-ellipsis>
     </n-h3>
diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue
index 38288d4a..17f90e21 100644
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -21,9 +21,9 @@
         <span>{{ tooltipText }}</span>
       </n-tooltip>
     </c-card>
-    <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
+    <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
       <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
index 64dc113e..db679146 100644
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,9 +1,9 @@
 <template>
   <router-link :to="tool.path">
     <c-card class="tool-card">
-      <n-space justify="space-between" align="center">
+      <div flex items-center justify-between>
         <n-icon class="icon" size="40" :component="tool.icon" />
-        <n-space align="center">
+        <div flex items-center gap-8px>
           <n-tag
             v-if="tool.isNew"
             size="small"
@@ -17,8 +17,8 @@
           </n-tag>
 
           <favorite-button :tool="tool" />
-        </n-space>
-      </n-space>
+        </div>
+      </div>
       <n-h3 class="title">
         <n-ellipsis>{{ tool.name }}</n-ellipsis>
       </n-h3>
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index 631f547c..dff15352 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -43,9 +43,9 @@ const tools = computed<ToolCategory[]>(() => [
       </router-link>
 
       <div class="sider-content">
-        <n-space v-if="styleStore.isSmallScreen" justify="center">
+        <div v-if="styleStore.isSmallScreen" flex justify-center>
           <navbar-buttons />
-        </n-space>
+        </div>
 
         <collapsible-tool-menu :tools-by-category="tools" />
 
diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue
index 6cccbb05..ae385d05 100644
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -29,7 +29,7 @@ useHead(head);
   <base-layout>
     <div class="tool-layout">
       <div class="tool-header">
-        <n-space align="center" justify="space-between" :wrap="false">
+        <div flex flex-nowrap items-center justify-between>
           <n-h1>
             {{ route.meta.name }}
           </n-h1>
@@ -37,7 +37,7 @@ useHead(head);
           <div>
             <favorite-button :tool="{name: route.meta.name} as Tool" />
           </div>
-        </n-space>
+        </div>
 
         <div class="separator" />
 
diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue
index 67647480..7e0660be 100644
--- a/src/tools/basic-auth-generator/basic-auth-generator.vue
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -18,9 +18,9 @@
         </n-scrollbar>
       </n-statistic>
     </c-card>
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
       <c-button @click="copy">Copy header</c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 
diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue
index c0c86f66..eb366fa7 100644
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -15,9 +15,9 @@
 
     <c-input-text :value="hashed" readonly text-center />
 
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
       <c-button @click="copy"> Copy hash </c-button>
-    </n-space>
+    </div>
   </c-card>
 
   <c-card title="Compare string with hash">
diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue
index 3a6182fe..be350f24 100644
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -1,6 +1,6 @@
 <template>
   <n-scrollbar style="flex: 1" x-scrollable>
-    <n-space :wrap="false" style="flex: 1" justify="center" :size="12" mb-5>
+    <div mb-5 flex flex-1 flex-nowrap justify-center gap-12px>
       <div v-for="(suite, index) of suites" :key="index">
         <c-card style="width: 294px">
           <c-input-text
@@ -17,7 +17,7 @@
           </n-form-item>
         </c-card>
 
-        <n-space justify="center">
+        <div flex justify-center>
           <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
             <n-icon :component="Trash" depth="3" mr-2 size="18" />
             Delete suite
@@ -29,14 +29,14 @@
             <n-icon :component="Plus" depth="3" mr-2 size="18" />
             Add suite
           </c-button>
-        </n-space>
+        </div>
       </div>
-    </n-space>
+    </div>
   </n-scrollbar>
 
   <div style="flex: 0 0 100%">
     <div style="max-width: 600px; margin: 0 auto">
-      <n-space justify="center">
+      <div mx-auto max-w-sm flex justify-center gap-3>
         <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
 
         <c-button
@@ -48,7 +48,7 @@
           "
           >Reset suites</c-button
         >
-      </n-space>
+      </div>
 
       <n-table>
         <thead>
@@ -70,10 +70,10 @@
           </tr>
         </tbody>
       </n-table>
-      <n-space justify="center" mt-5>
+      <div mt-5 flex justify-center gap-3>
         <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
         <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
-      </n-space>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue
index 189be9ea..5e349fc8 100644
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-space v-for="(value, index) of values" :key="index" :wrap="false" style="margin-bottom: 5px" :size="5">
+    <div v-for="(value, index) of values" :key="index" mb-2 flex flex-nowrap gap-2>
       <n-input-number
         :ref="refs.set"
         v-model:value="values[index]"
@@ -17,7 +17,7 @@
         </template>
         Delete value
       </n-tooltip>
-    </n-space>
+    </div>
 
     <c-button @click="addValue">
       <n-icon :component="Plus" depth="3" mr-2 size="18" />
diff --git a/src/tools/chronometer/chronometer.vue b/src/tools/chronometer/chronometer.vue
index 0c8eb09a..bcd01a22 100644
--- a/src/tools/chronometer/chronometer.vue
+++ b/src/tools/chronometer/chronometer.vue
@@ -3,12 +3,12 @@
     <c-card>
       <div class="duration">{{ formatMs(counter) }}</div>
     </c-card>
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center gap-3>
       <c-button v-if="!isRunning" type="primary" @click="resume">Start</c-button>
       <c-button v-else type="warning" @click="pause">Stop</c-button>
 
       <c-button @click="counter = 0">Reset</c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 
diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue
index 6f8572d8..d2559d72 100644
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -16,7 +16,7 @@
 
     <n-divider />
 
-    <n-space justify="center">
+    <div flex justify-center>
       <n-form :show-feedback="false" label-width="170" label-placement="left">
         <n-form-item label="Verbose">
           <n-switch v-model:value="cronstrueConfig.verbose" />
@@ -28,7 +28,7 @@
           <n-switch v-model:value="cronstrueConfig.dayOfWeekStartIndexZero" />
         </n-form-item>
       </n-form>
-    </n-space>
+    </div>
   </c-card>
   <c-card>
     <pre>
@@ -42,8 +42,8 @@
 * * * * * * command</pre
     >
 
-    <n-space v-if="styleStore.isSmallScreen" vertical>
-      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none>
+    <div v-if="styleStore.isSmallScreen">
+      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" mb-3 important:border-none>
         <div>
           Symbol: <strong>{{ symbol }}</strong>
         </div>
@@ -60,7 +60,7 @@
           Equivalent: <strong>{{ equivalent }}</strong>
         </div>
       </c-card>
-    </n-space>
+    </div>
     <n-table v-else size="small">
       <thead>
         <tr>
diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
index e66e9206..ea6e242e 100644
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -14,9 +14,9 @@
 
     <textarea-copyable :value="dockerCompose" language="yaml" />
 
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
       <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
-    </n-space>
+    </div>
 
     <div v-if="notComposable.length > 0">
       <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index d4f6e34a..4da451cf 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,7 +1,7 @@
 <template>
   <c-card title="Encrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your text:" :show-feedback="false">
+    <div flex gap-3>
+      <n-form-item label="Your text:" :show-feedback="false" flex-1>
         <n-input
           v-model:value="cypherInput"
           type="textarea"
@@ -13,7 +13,7 @@
           spellcheck="false"
         />
       </n-form-item>
-      <n-space vertical>
+      <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
 
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
@@ -22,8 +22,8 @@
             :options="Object.keys(algos).map((label) => ({ label, value: label }))"
           />
         </n-form-item>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
     <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
       <n-input
         :value="cypherOutput"
@@ -39,8 +39,8 @@
     </n-form-item>
   </c-card>
   <c-card title="Decrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your encrypted text:" :show-feedback="false">
+    <div flex gap-3>
+      <n-form-item label="Your encrypted text:" :show-feedback="false" flex-1>
         <n-input
           v-model:value="decryptInput"
           type="textarea"
@@ -52,7 +52,7 @@
           spellcheck="false"
         />
       </n-form-item>
-      <n-space vertical>
+      <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
 
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
@@ -61,8 +61,8 @@
             :options="Object.keys(algos).map((label) => ({ label, value: label }))"
           />
         </n-form-item>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
     <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
       <n-input
         :value="decryptOutput"
diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
index 8ee23f57..59bccda8 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>
 
diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue
index 46b0f1f3..f0fc2398 100644
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@@ -6,15 +6,15 @@
     <n-form-item label="Secret key">
       <n-input v-model:value="secret" placeholder="Enter the secret key..." />
     </n-form-item>
-    <n-space item-style="flex:1 1 0">
-      <n-form-item label="Hashing function">
+    <div flex gap-2>
+      <n-form-item label="Hashing function" flex-1>
         <n-select
           v-model:value="hashFunction"
           placeholder="Select an hashing function..."
           :options="Object.keys(algos).map((label) => ({ label, value: label }))"
         />
       </n-form-item>
-      <n-form-item label="Output encoding">
+      <n-form-item label="Output encoding" flex-1>
         <n-select
           v-model:value="encoding"
           placeholder="Select the result encoding..."
@@ -38,13 +38,13 @@
           ]"
         />
       </n-form-item>
-    </n-space>
+    </div>
     <n-form-item label="HMAC of your text">
       <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
     </n-form-item>
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button @click="copy()">Copy HMAC</c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 
diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue
index eb4a5f36..0c75975b 100644
--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@@ -19,9 +19,9 @@
       />
     </n-form-item>
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button @click="copyEscaped"> Copy </c-button>
-    </n-space>
+    </div>
   </c-card>
   <c-card title="Unescape html entities">
     <n-form-item label="Your escaped string :">
@@ -43,9 +43,9 @@
       />
     </n-form-item>
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button @click="copyUnescaped"> Copy </c-button>
-    </n-space>
+    </div>
   </c-card>
 </template>
 
diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
index ff21b695..b54d97b6 100644
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
@@ -1,10 +1,10 @@
 <template>
-  <n-space align="center" :size="0">
+  <div flex items-center>
     <template v-for="(item, index) in items">
       <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
       <menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" />
     </template>
-  </n-space>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/http-status-codes/http-status-codes.vue b/src/tools/http-status-codes/http-status-codes.vue
index 992fbc1e..9f827f5a 100644
--- a/src/tools/http-status-codes/http-status-codes.vue
+++ b/src/tools/http-status-codes/http-status-codes.vue
@@ -21,10 +21,8 @@
       <n-h2> {{ category }} </n-h2>
 
       <c-card v-for="{ code, description, name, type } of codes" :key="code" mb-2>
-        <n-space align="center">
-          <n-text strong text-lg> {{ code }} {{ name }} </n-text>
-        </n-space>
-        <n-text depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
+        <n-text strong block text-lg> {{ code }} {{ name }} </n-text>
+        <n-text block depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
       </c-card>
     </div>
   </div>
diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
index 7f89a6ac..f1b8dc68 100644
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
@@ -1,61 +1,56 @@
 <template>
   <div>
-    <n-space item-style="flex:1 1 0">
-      <div>
-        <div mb-4 flex gap-4>
-          <c-input-text
-            v-model:value="rawStartAddress"
-            label="Start address"
-            placeholder="Start IPv4 address..."
-            :validation="startIpValidation"
-            clearable
-          />
+    <div mb-4 flex gap-4>
+      <c-input-text
+        v-model:value="rawStartAddress"
+        label="Start address"
+        placeholder="Start IPv4 address..."
+        :validation="startIpValidation"
+        clearable
+      />
 
-          <c-input-text
-            v-model:value="rawEndAddress"
-            label="End address"
-            placeholder="End IPv4 address..."
-            :validation="endIpValidation"
-            clearable
-          />
-        </div>
+      <c-input-text
+        v-model:value="rawEndAddress"
+        label="End address"
+        placeholder="End IPv4 address..."
+        :validation="endIpValidation"
+        clearable
+      />
+    </div>
 
-        <n-table v-if="showResult" data-test-id="result">
-          <thead>
-            <tr>
-              <th scope="col">&nbsp;</th>
-              <th scope="col">old value</th>
-              <th scope="col">new value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <result-row
-              v-for="{ label, getOldValue, getNewValue } in calculatedValues"
-              :key="label"
-              :label="label"
-              :old-value="getOldValue(result)"
-              :new-value="getNewValue(result)"
-            />
-          </tbody>
-        </n-table>
-        <n-alert
-          v-else-if="startIpValidation.isValid && endIpValidation.isValid"
-          title="Invalid combination of start and end IPv4 address"
-          type="error"
-        >
-          <n-space vertical>
-            <n-text depth="3">
-              The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be
-              calculated. In the most cases the solution to solve this problem is to change start and end address.
-            </n-text>
-            <c-button @click="onSwitchStartEndClicked">
-              <n-icon mr-2 :component="Exchange" depth="3" size="22" />
-              Switch start and end IPv4 address
-            </c-button>
-          </n-space>
-        </n-alert>
-      </div>
-    </n-space>
+    <n-table v-if="showResult" data-test-id="result">
+      <thead>
+        <tr>
+          <th scope="col">&nbsp;</th>
+          <th scope="col">old value</th>
+          <th scope="col">new value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <result-row
+          v-for="{ label, getOldValue, getNewValue } in calculatedValues"
+          :key="label"
+          :label="label"
+          :old-value="getOldValue(result)"
+          :new-value="getNewValue(result)"
+        />
+      </tbody>
+    </n-table>
+    <n-alert
+      v-else-if="startIpValidation.isValid && endIpValidation.isValid"
+      title="Invalid combination of start and end IPv4 address"
+      type="error"
+    >
+      <n-text depth="3" my-3 block>
+        The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be calculated.
+        In the most cases the solution to solve this problem is to change start and end address.
+      </n-text>
+
+      <c-button @click="onSwitchStartEndClicked">
+        <n-icon mr-2 :component="Exchange" depth="3" size="22" />
+        Switch start and end IPv4 address
+      </c-button>
+    </n-alert>
   </div>
 </template>
 
diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
index 1767fc99..ca9f424f 100644
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@@ -23,7 +23,7 @@
         </tbody>
       </n-table>
 
-      <n-space style="margin-top: 14px" justify="space-between">
+      <div mt-3 flex items-center justify-between>
         <c-button @click="switchToBlock({ count: -1 })">
           <n-icon :component="ArrowLeft" />
           Previous block
@@ -32,7 +32,7 @@
           Next block
           <n-icon :component="ArrowRight" />
         </c-button>
-      </n-space>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue
index c77d4073..8d17e6bc 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="showResults">
-    <n-space justify="center">
+    <div flex justify-center>
       <n-form-item label="Only show differences" label-placement="left">
         <n-switch v-model:value="onlyShowDifferences" />
       </n-form-item>
-    </n-space>
+    </div>
 
     <c-card data-test-id="diff-result">
       <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
diff --git a/src/tools/json-viewer/json-viewer.vue b/src/tools/json-viewer/json-viewer.vue
index 60ae66c2..7e95db1f 100644
--- a/src/tools/json-viewer/json-viewer.vue
+++ b/src/tools/json-viewer/json-viewer.vue
@@ -1,13 +1,13 @@
 <template>
   <div style="flex: 0 0 100%">
-    <n-space style="margin: 0 auto; max-width: 600px" justify="center">
+    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
       <n-form-item label="Sort keys :" label-placement="left" label-width="100">
         <n-switch v-model:value="sortKeys" />
       </n-form-item>
       <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
         <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
       </n-form-item>
-    </n-space>
+    </div>
   </div>
 
   <n-form-item
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue
index c103d630..7a987b6f 100644
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -10,20 +10,12 @@
           <th colspan="2" class="table-header">{{ section.title }}</th>
           <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
             <td class="claims">
-              <n-space>
-                <n-text strong>{{ claim }}</n-text>
-                <template v-if="claimDescription">
-                  <n-text depth="3">({{ claimDescription }})</n-text>
-                </template>
-              </n-space>
+              <n-text strong>{{ claim }}</n-text>
+              <n-text v-if="claimDescription" depth="3" ml-2>({{ claimDescription }})</n-text>
             </td>
             <td>
-              <n-space>
-                <n-text>{{ value }}</n-text>
-                <template v-if="friendlyValue">
-                  <n-text depth="3">({{ friendlyValue }})</n-text>
-                </template>
-              </n-space>
+              <n-text>{{ value }}</n-text>
+              <n-text v-if="friendlyValue" ml-2 depth="3">({{ friendlyValue }})</n-text>
             </td>
           </tr>
         </template>
diff --git a/src/tools/list-converter/list-converter.vue b/src/tools/list-converter/list-converter.vue
index f8da070a..7258dc36 100644
--- a/src/tools/list-converter/list-converter.vue
+++ b/src/tools/list-converter/list-converter.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="flex: 0 0 100%">
-    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+    <div style="margin: 0 auto; max-width: 600px">
       <c-card>
         <div flex>
           <div>
@@ -73,7 +73,7 @@
           </div>
         </div>
       </c-card>
-    </n-space>
+    </div>
   </div>
   <format-transformer
     input-label="Your input data"
diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
index bb2e7370..9e3b1866 100644
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@@ -18,9 +18,9 @@
 
     <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 />
 
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
       <c-button autofocus @click="copy"> Copy </c-button>
-    </n-space>
+    </div>
   </c-card>
 </template>
 
diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
index 73fbd25c..95527d01 100644
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -25,10 +25,10 @@
       <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
       <div style="text-align: center">Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s</div>
     </div>
-    <n-space justify="center" vertical align="center" style="margin-top: 10px">
+    <div mt-4 flex flex-col items-center justify-center gap-3>
       <n-image :src="qrcode"></n-image>
       <c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
-    </n-space>
+    </div>
   </div>
   <div style="max-width: 350px">
     <input-copyable
diff --git a/src/tools/otp-code-generator-and-validator/token-display.vue b/src/tools/otp-code-generator-and-validator/token-display.vue
index 6eadcb27..532cbe7b 100644
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <n-space class="labels" item-style="flex: 1 1 0" w-full align="center">
-      <div style="text-align: left">Previous</div>
-      <div style="text-align: center">Current OTP</div>
-      <div style="text-align: right">Next</div>
-    </n-space>
+    <div class="labels" w-full flex items-center>
+      <div flex-1 text-left>Previous</div>
+      <div flex-1 text-center>Current OTP</div>
+      <div flex-1 text-right>Next</div>
+    </div>
     <n-input-group>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
@@ -63,7 +63,6 @@ const { tokens } = toRefs(props);
 
 .labels {
   div {
-    text-align: center;
     padding: 0 2px 6px 2px;
     line-height: 1.25;
   }
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
index 427b96b7..12fcf113 100644
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -26,10 +26,10 @@
         </n-form>
       </n-gi>
       <n-gi>
-        <n-space justify="center" align="center" vertical>
+        <div flex flex-col items-center gap-3>
           <n-image :src="qrcode" width="200" />
           <c-button @click="download"> Download qr-code </c-button>
-        </n-space>
+        </div>
       </n-gi>
     </n-grid>
   </c-card>
diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue
index 77df439c..8e3ecb63 100644
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@@ -3,10 +3,10 @@
     <div class="port">
       {{ port }}
     </div>
-    <n-space justify="center">
+    <div flex justify-center gap-3>
       <c-button @click="copy"> Copy </c-button>
       <c-button @click="refreshPort"> Refresh </c-button>
-    </n-space>
+    </div>
   </c-card>
 </template>
 
diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
index cc5ce937..11468657 100644
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <c-card title="Arabic to roman">
-      <n-space align="center" justify="space-between">
+      <div flex items-center justify-between>
         <n-form-item v-bind="validationNumeral as any">
           <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
         </n-form-item>
@@ -11,17 +11,17 @@
         <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
           Copy
         </c-button>
-      </n-space>
+      </div>
     </c-card>
     <c-card title="Roman to arabic" mt-5>
-      <n-space align="center" justify="space-between">
+      <div flex items-center justify-between>
         <c-input-text v-model:value="inputRoman" style="width: 200px" :validation="validationRoman" />
 
         <div class="result">
           {{ outputNumeral }}
         </div>
         <c-button :disabled="!validationRoman.isValid" @click="copyArabic"> Copy </c-button>
-      </n-space>
+      </div>
     </c-card>
   </div>
 </template>
diff --git a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
index a2202c94..80f71b20 100644
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
@@ -1,12 +1,12 @@
 <template>
   <div style="flex: 0 0 100%">
-    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+    <div item-style="flex: 1 1 0" style="max-width: 600px" mx-auto flex gap-3>
       <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100">
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
 
       <c-button @click="refreshCerts">Refresh key-pair</c-button>
-    </n-space>
+    </div>
   </div>
 
   <div>
diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue
index c4c3bd12..c140e21e 100644
--- a/src/tools/slugify-string/slugify-string.vue
+++ b/src/tools/slugify-string/slugify-string.vue
@@ -13,9 +13,9 @@
       ></n-input>
     </n-form-item>
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 
diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue
index 9f1e4fe9..b8d4aa4f 100644
--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="flex: 0 0 100%">
-    <n-space item-style="flex:1 1 0" style="margin: 0 auto; max-width: 600px" :vertical="styleStore.isSmallScreen">
-      <n-form-item label="Dialect" label-width="500">
+    <div mx-auto style="max-width: 600px" flex gap-2 :class="{ 'flex-col': styleStore.isSmallScreen }">
+      <n-form-item label="Dialect" label-width="500" flex-1>
         <n-select
           v-model:value="config.language"
           :options="[
@@ -21,7 +21,7 @@
           ]"
         />
       </n-form-item>
-      <n-form-item label="Keyword case">
+      <n-form-item label="Keyword case" flex-1>
         <n-select
           v-model:value="config.keywordCase"
           :options="[
@@ -31,7 +31,7 @@
           ]"
         />
       </n-form-item>
-      <n-form-item label="Indent style">
+      <n-form-item label="Indent style" flex-1>
         <n-select
           v-model:value="config.indentStyle"
           :options="[
@@ -41,7 +41,7 @@
           ]"
         />
       </n-form-item>
-    </n-space>
+    </div>
   </div>
 
   <n-form-item label="Your SQL query">
diff --git a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
index dacc7007..0ff61a60 100644
--- a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
+++ b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
@@ -1,24 +1,24 @@
 <template>
   <div>
     <n-form label-placement="left" label-width="100">
-      <n-space item-style="flex:1 1 0">
-        <n-form-item label="Width (in px)">
+      <div flex gap-3>
+        <n-form-item label="Width (in px)" flex-1>
           <n-input-number v-model:value="width" placeholder="SVG width..." min="1" />
         </n-form-item>
-        <n-form-item label="Background">
+        <n-form-item label="Background" flex-1>
           <n-color-picker v-model:value="bgColor" :modes="['hex']" />
         </n-form-item>
-      </n-space>
-      <n-space item-style="flex:1 1 0">
-        <n-form-item label="Height (in px)">
+      </div>
+      <div flex gap-3>
+        <n-form-item label="Height (in px)" flex-1>
           <n-input-number v-model:value="height" placeholder="SVG height..." min="1" />
         </n-form-item>
-        <n-form-item label="Text color">
+        <n-form-item label="Text color" flex-1>
           <n-color-picker v-model:value="fgColor" :modes="['hex']" />
         </n-form-item>
-      </n-space>
-      <n-space item-style="flex:1 1 0">
-        <n-form-item label="Font size">
+      </div>
+      <div flex gap-3>
+        <n-form-item label="Font size" flex-1>
           <n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" />
         </n-form-item>
 
@@ -29,8 +29,9 @@
           label-position="left"
           label-width="100px"
           label-align="right"
+          flex-1
         />
-      </n-space>
+      </div>
       <n-form-item label="Use exact size" label-placement="left">
         <n-switch v-model:value="useExactSize" />
       </n-form-item>
@@ -43,16 +44,14 @@
       <textarea-copyable :value="base64" copy-placement="none" />
     </n-form-item>
 
-    <n-space justify="center">
+    <div flex justify-center gap-3>
       <c-button @click="copySVG()">Copy svg</c-button>
       <c-button @click="copyBase64()">Copy base64</c-button>
       <c-button @click="download()">Download svg</c-button>
-    </n-space>
+    </div>
   </div>
 
-  <n-space vertical justify="start">
-    <img :src="base64" alt="Image" />
-  </n-space>
+  <img :src="base64" alt="Image" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue
index aa4d6840..a03915c7 100644
--- a/src/tools/text-statistics/text-statistics.vue
+++ b/src/tools/text-statistics/text-statistics.vue
@@ -2,12 +2,12 @@
   <c-card>
     <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
 
-    <n-space justify="space-around" mt-5>
-      <n-statistic label="Character count" :value="text.length" />
-      <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" />
-      <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" />
-      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
-    </n-space>
+    <div mt-5 flex>
+      <n-statistic label="Character count" :value="text.length" flex-1 />
+      <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" flex-1 />
+      <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" flex-1 />
+      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" flex-1 />
+    </div>
   </c-card>
 </template>
 
diff --git a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
index 4b12adb9..9ded4ff6 100644
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
@@ -8,16 +8,16 @@
       mb-5
     />
 
-    <n-space v-if="natoText" vertical>
-      <n-text>Your text in NATO phonetic alphabet</n-text>
+    <div v-if="natoText">
+      <n-text mb-1 block>Your text in NATO phonetic alphabet</n-text>
       <c-card>
         {{ natoText }}
       </c-card>
 
-      <n-space justify="center">
+      <div mt-3 flex justify-center>
         <c-button autofocus @click="copy"> Copy NATO string </c-button>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue
index 79f30652..bdfb4da2 100644
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -2,7 +2,7 @@
   <div>
     <c-card>
       <n-form label-placement="left" label-width="140">
-        <n-space justify="center" item-style="padding: 0" :size="0">
+        <div flex justify-center>
           <div>
             <n-form-item label="Uppercase (ABC...)">
               <n-switch v-model:value="withUppercase" />
@@ -22,7 +22,7 @@
               <n-switch v-model:value="withSymbols" />
             </n-form-item>
           </div>
-        </n-space>
+        </div>
       </n-form>
 
       <n-form-item :label="`Length (${length})`" label-placement="left">
@@ -42,10 +42,10 @@
         spellcheck="false"
       />
 
-      <n-space justify="center" mt-5>
+      <div mt-5 flex justify-center gap-3>
         <c-button @click="copy"> Copy </c-button>
         <c-button @click="refreshToken"> Refresh </c-button>
-      </n-space>
+      </div>
     </c-card>
   </div>
 </template>
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue
index 33e5ee57..4f89986a 100644
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -23,9 +23,9 @@
       />
     </n-form-item>
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button @click="copyEncoded"> Copy </c-button>
-    </n-space>
+    </div>
   </c-card>
   <c-card title="Decode">
     <n-form-item
@@ -51,9 +51,9 @@
       />
     </n-form-item>
 
-    <n-space justify="center">
+    <div flex justify-center>
       <c-button @click="copyDecoded"> Copy </c-button>
-    </n-space>
+    </div>
   </c-card>
 </template>
 
diff --git a/src/tools/user-agent-parser/user-agent-result-cards.vue b/src/tools/user-agent-parser/user-agent-result-cards.vue
index ba309252..20226c1d 100644
--- a/src/tools/user-agent-parser/user-agent-result-cards.vue
+++ b/src/tools/user-agent-parser/user-agent-result-cards.vue
@@ -12,7 +12,7 @@
             </template>
           </n-page-header>
 
-          <n-space mt-5>
+          <div mt-5 flex gap-2>
             <span v-for="{ label, getValue } in content" :key="label">
               <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
                 <template #trigger>
@@ -23,12 +23,12 @@
                 {{ label }}
               </n-tooltip>
             </span>
-          </n-space>
-          <n-space vertical>
+          </div>
+          <div flex flex-col>
             <span v-for="{ label, getValue, undefinedFallback } in content" :key="label">
               <n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text>
             </span>
-          </n-space>
+          </div>
         </c-card>
       </n-gi>
     </n-grid>
diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index b2c74134..de9cbf2f 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -1,9 +1,9 @@
 <template>
-  <n-space vertical :size="20">
-    <n-space align="center" justify="center">
+  <div>
+    <div flex items-center justify-center gap-3>
       Quantity :
       <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
-    </n-space>
+    </div>
 
     <n-input
       style="text-align: center; font-family: monospace"
@@ -16,13 +16,14 @@
       autocorrect="off"
       autocapitalize="off"
       spellcheck="false"
+      my-3
     />
 
-    <n-space justify="center">
+    <div flex justify-center gap-3>
       <c-button autofocus @click="copy"> Copy </c-button>
       <c-button @click="refreshUUIDs"> Refresh </c-button>
-    </n-space>
-  </n-space>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">