From 7a74c8569c779784dbb82c57d210f1ce70e944da Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sun, 3 Mar 2024 11:32:22 +0100
Subject: [PATCH] refactor(ascii-generator): equilibrate ui

---
 src/tools/ascii-text-drawer/ascii-text-drawer.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/tools/ascii-text-drawer/ascii-text-drawer.vue b/src/tools/ascii-text-drawer/ascii-text-drawer.vue
index 83fec620..9a6520a4 100644
--- a/src/tools/ascii-text-drawer/ascii-text-drawer.vue
+++ b/src/tools/ascii-text-drawer/ascii-text-drawer.vue
@@ -8,6 +8,7 @@ const width = useStorage('ascii-text-drawer:width', 80);
 const output = ref('');
 const errored = ref(false);
 const processing = ref(false);
+
 figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' });
 
 watchEffect(async () => {
@@ -46,6 +47,8 @@ const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line
       label="Your text:"
       placeholder="Your text to draw"
       raw-text
+      multiline
+      rows="4"
     />
 
     <n-divider />
@@ -63,7 +66,7 @@ const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line
       </n-gi>
       <n-gi span="2">
         <n-form-item label="Width:" label-placement="top" label-width="100" :show-feedback="false">
-          <n-input-number v-model:value="width" min="0" max="10000" w-100px />
+          <n-input-number v-model:value="width" min="0" max="10000" w-full placeholder="Width of the text" />
         </n-form-item>
       </n-gi>
     </n-grid>
@@ -72,6 +75,7 @@ const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line
 
     <div v-if="processing" flex items-center justify-center>
       <n-spin size="medium" />
+      <span class="ml-2">Loading font...</span>
     </div>
 
     <c-alert v-if="errored" mt-1 text-center type="error">