fix: paddings and margins

resources/ts/views/HomeView.vue

@@ -24,18 +24,18 @@ function onInput() {
 }
 
 function updateTitle() {
-    document.title = 'Tout Doux';
+    document.title = "Tout Doux";
 }
 
-onBeforeMount(updateTitle)
+onBeforeMount(updateTitle);
 onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>
-    <div
-        class="p-4 italic text-xl font-extralight"
-    >{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
-    <div class="flex gap-2 p-4">
+    <div class="italic mt-4 text-xl font-extralight">
+        {{ $t("home") }}<br />{{ $t("call_to_action") }}
+    </div>
+    <div class="flex gap-2 mt-4">
         <input
             v-model="listNameInput"
             type="text"
@@ -47,7 +47,7 @@ onBeforeRouteUpdate(updateTitle);
             <dices-icon />
         </button>
     </div>
-    <div class="w-full">
+    <div class="mt-4">
         <router-link
             class="btn btn-lg"
             :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
@@ -57,14 +57,21 @@ onBeforeRouteUpdate(updateTitle);
             {{ $t("home_button") }}
         </router-link>
     </div>
-    <div v-if="recentLists.length" class="collapse collapse-arrow font-light text-sm">
-        <input id="recent-dropdown" type="checkbox" />
-        <div class="collapse-title">
+    <div
+        v-if="recentLists.length"
+        class="mt-4 -mb-4 lh collapse collapse-arrow font-light text-sm"
+    >
+        <input id="recent-dropdown p-0" type="checkbox" />
+        <div class="collapse-title p-0 content-center">
             <history-icon class="inline" :size="16" />
             {{ $t("recent") }}
         </div>
         <div class="collapse-content">
-            <recent-item v-for="(list, i) in recentLists" :key="`recent-${i}`" :list="list" />
+            <recent-item
+                v-for="(list, i) in recentLists"
+                :key="`recent-${i}`"
+                :list="list"
+            />
         </div>
     </div>
 </template>