💄 (home) not good but good enough display

src/modules/task/components/TaskList.vue

@@ -6,7 +6,7 @@ const taskStore = useTaskStore()
 </script>
 
 <template>
-  <div class="content" v-if="taskStore.recentTasks.length > 0">
+  <div class="task-list-container" v-if="taskStore.recentTasks.length > 0">
     <ul class="task-list">
       <li v-for="task in taskStore.recentTasks" :key="task.id">
         <router-link
@@ -22,9 +22,20 @@ const taskStore = useTaskStore()
 </template>
 
 <style scoped>
+.task-list-container {
+  padding: 0.5rem;
+  background-color: #f1f2f6;
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .task-list li {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 </style>

src/views/HomeView.vue

@@ -16,7 +16,7 @@ const resetTasks = () => {
 
 <template>
   <main>
-    <div class="columns is-centered">
+    <div class="content-tasks columns is-centered is-vcentered">
       <div class="new-task-container column buttons">
         <router-link :to="{ name: 'new-task' }" class="button is-primary"
           >Create a new task</router-link
@@ -25,7 +25,7 @@ const resetTasks = () => {
           clear the list
         </button>
       </div>
-      <task-list class="column" />
+      <task-list class="column task-list" />
     </div>
     <footer>
       <p>
@@ -49,12 +49,28 @@ main {
   height: 100%;
 }
 
+.content-tasks {
+  flex: 1;
+}
+
 .new-task-container {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.task-list {
+  max-height: 60vh;
+  overflow-y: auto;
+  margin: 0 1rem;
+  border-radius: 1rem;
+}
+
+footer {
+  text-align: center;
+  padding-bottom: 0.5rem;
+}
+
 footer img {
   vertical-align: middle;
 }