fix: better ui on small phone screens

Author: sharevb

components.d.ts

@@ -136,6 +136,7 @@ declare module '@vue/runtime-core' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NFlex: typeof import('naive-ui')['NFlex']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
@@ -144,6 +145,7 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NSpace: typeof import('naive-ui')['NSpace']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

src/tools/smart-text-replacer/smart-text-replacer.vue

@@ -146,27 +146,23 @@ const { copy } = useCopy({ source: highlightedText });
       </div>
     </div>
 
-    <div mt-4 w-full flex gap-10px>
-      <div flex-2 flex items-baseline gap-10px>
-        <c-button @click="findNext()">
-          <label>Find Next</label>
-        </c-button>
-        <n-checkbox v-model:checked="matchCase">
-          <label>Match case</label>
-        </n-checkbox>
-        <n-checkbox v-model:checked="keepLineBreaks">
-          <label>Keep linebreaks</label>
-        </n-checkbox>
-      </div>
-      <div flex flex-1 justify-end gap-10px>
-        <c-button @click="replaceSelected()">
-          <label>Replace</label>
-        </c-button>
-        <c-button @click="replaceAll()">
-          <label>Replace All</label>
-        </c-button>
-      </div>
-    </div>
+    <n-space mt-4 gap-1 align="baseline" justify="space-between">
+      <c-button @click="findNext()">
+        <label>Find Next</label>
+      </c-button>
+      <c-button @click="replaceSelected()">
+        <label>Replace</label>
+      </c-button>
+      <c-button @click="replaceAll()">
+        <label>Replace All</label>
+      </c-button>
+      <n-checkbox v-model:checked="matchCase">
+        <label>Match case</label>
+      </n-checkbox>
+      <n-checkbox v-model:checked="keepLineBreaks">
+        <label>Keep linebreaks</label>
+      </n-checkbox>
+    </n-space>
 
     <n-divider />