refactor(responsive): row layout for multicards on big screens

src/layouts/tool.layout.vue

@@ -33,20 +33,36 @@ useHead(head);
           {{ route.meta.description }}
         </div>
       </div>
+    </div>
 
+    <div class="tool-content">
       <slot />
     </div>
   </base-layout>
 </template>
 
 <style lang="less" scoped>
+.tool-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  ::v-deep(& > *) {
+    flex: 0 1 600px;
+  }
+}
+
 .tool-layout {
-  max-width: 700px;
+  max-width: 600px;
   margin: 0 auto;
   box-sizing: border-box;
 
   .tool-header {
     padding: 40px 0;
+    width: 100%;
 
     .n-h1 {
       opacity: 0.9;

src/tools/base64-converter/base64-converter.vue

@@ -50,8 +50,7 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
 
 <style lang="less" scoped>
 .n-input,
-.n-upload,
+.n-upload {
-.n-card {
   margin-bottom: 15px;
 }
 

src/tools/bcrypt/bcrypt.vue

@@ -22,7 +22,6 @@
     </n-space>
   </n-card>
 
-  <br />
   <n-card title="Compare string with hash">
     <n-form label-width="120">
       <n-form-item label="Your string: " label-placement="left">

src/tools/crontab-generator/crontab-generator.vue

@@ -28,7 +28,6 @@
       </n-form>
     </n-space>
   </n-card>
-  <br />
   <n-card>
     <pre>
 ┌──────────── [optional] seconds (0 - 59)

src/tools/device-information/device-information.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card v-for="{ name, information } in sections" :key="name" :title="name" style="margin-bottom: 15px">
+  <n-card v-for="{ name, information } in sections" :key="name" :title="name">
     <n-grid cols="1 400:2" x-gap="12" y-gap="12">
       <n-gi v-for="{ label, value } in information" :key="label" class="information">
         <n-card :bordered="false" embedded>

src/tools/encryption/encryption.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <n-card title="Encrypt">
     <n-space item-style="flex: 1 1 0">
       <n-form-item label="Your text:" :show-feedback="false">
@@ -37,7 +36,6 @@
       />
     </n-form-item>
   </n-card>
-    <br />
   <n-card title="Decrypt">
     <n-space item-style="flex: 1 1 0">
       <n-form-item label="Your encrypted text:" :show-feedback="false">
@@ -75,7 +73,6 @@
       />
     </n-form-item>
   </n-card>
-  </div>
 </template>
 
 <script setup lang="ts">

src/tools/html-entities/html-entities.vue

@@ -23,7 +23,6 @@
       <n-button secondary @click="copyEscaped"> Copy </n-button>
     </n-space>
   </n-card>
-  <br />
   <n-card title="Unescape html entities">
     <n-form-item label="Your escaped string :">
       <n-input

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

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <n-card title="Encode">
     <n-form-item
       label="Your string :"
@@ -28,7 +27,6 @@
       <n-button secondary @click="copyEncoded"> Copy </n-button>
     </n-space>
   </n-card>
-    <br />
   <n-card title="Decode">
     <n-form-item
       label="Your encoded string :"
@@ -57,7 +55,6 @@
       <n-button secondary @click="copyDecoded"> Copy </n-button>
     </n-space>
   </n-card>
-  </div>
 </template>
 
 <script setup lang="ts">