fix(style): url encode/decode layout

src/tools/url-encoder/url-encoder.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-space item-style="flex:1">
+  <div>
     <n-card title="Encode">
       <n-form-item
         label="Your string :"
@@ -10,7 +10,7 @@
           v-model:value="encodeInput"
           type="textarea"
           placeholder="The string to encode"
-          :autosize="{ minRows: 3 }"
+          :autosize="{ minRows: 2 }"
         />
       </n-form-item>
 
@@ -20,7 +20,7 @@
           type="textarea"
           readonly
           placeholder="Your string encoded"
-          :autosize="{ minRows: 3 }"
+          :autosize="{ minRows: 2 }"
         />
       </n-form-item>
 
@@ -33,9 +33,10 @@
         </n-button>
       </n-space>
     </n-card>
-    <n-card title="Encode">
+    <br>
+    <n-card title="Decode">
       <n-form-item
-        label="Your encode string :"
+        label="Your encoded string :"
         :feedback="decodeValidation.message"
         :validation-status="decodeValidation.status"
       >
@@ -43,17 +44,17 @@
           v-model:value="decodeInput"
           type="textarea"
           placeholder="The string to decode"
-          :autosize="{ minRows: 3 }"
+          :autosize="{ minRows: 2 }"
         />
       </n-form-item>
 
-      <n-form-item label="Your string decoded :">
+      <n-form-item label="Your string decoded :"> 
         <n-input
           :value="decodeOutput"
           type="textarea"
           readonly
           placeholder="Your string decoded"
-          :autosize="{ minRows: 3 }"
+          :autosize="{ minRows: 2 }"
         />
       </n-form-item>
 
@@ -66,7 +67,7 @@
         </n-button>
       </n-space>
     </n-card>
-  </n-space>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -76,25 +77,25 @@ import { computed, ref } from 'vue'
 
 const encodeInput = ref('Hello world :)')
 const encodeOutput = computed(() => {
-    try {
+  try {
-        return encodeURIComponent(encodeInput.value)
+    return encodeURIComponent(encodeInput.value)
-    } catch (_) {
+  } catch (_) {
-        return ''
+    return ''
-    }
+  }
 })
 
 const encodedValidation = useValidation({
-    source: encodeInput, rules: [{
+  source: encodeInput, rules: [{
-        validator: (value) => {
+    validator: (value) => {
-            try {
+      try {
-                encodeURIComponent(value)
+        encodeURIComponent(value)
-                return true
+        return true
-            } catch (_) {
+      } catch (_) {
-                return false
+        return false
-            }
+      }
-        },
+    },
-        message: 'Impossible to parse this string'
+    message: 'Impossible to parse this string'
-    }]
+  }]
 })
 
 const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: 'Encoded string copied to the clipboard' })
@@ -103,25 +104,25 @@ const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: 'Encoded str
 const decodeInput = ref('Hello%20world%20%3A)')
 
 const decodeOutput = computed(() => {
-    try {
+  try {
-        return decodeURIComponent(decodeInput.value)
+    return decodeURIComponent(decodeInput.value)
-    } catch (_) {
+  } catch (_) {
-        return ''
+    return ''
-    }
+  }
 })
 
 const decodeValidation = useValidation({
-    source: encodeInput, rules: [{
+  source: encodeInput, rules: [{
-        validator: (value) => {
+    validator: (value) => {
-            try {
+      try {
-                decodeURIComponent(value)
+        decodeURIComponent(value)
-                return true
+        return true
-            } catch (_) {
+      } catch (_) {
-                return false
+        return false
-            }
+      }
-        },
+    },
-        message: 'Impossible to parse this string'
+    message: 'Impossible to parse this string'
-    }]
+  }]
 })
 
 const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded string copied to the clipboard' })