refactor(ui): removed all n-space

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

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;
   }