From 2f5f82a98346a048d83153c53266441756fe3199 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 8 Jul 2023 10:29:20 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20(home)=20not=20good=20but=20good?=
 =?UTF-8?q?=20enough=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/task/components/TaskList.vue | 15 +++++++++++++--
 src/views/HomeView.vue                   | 20 ++++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/modules/task/components/TaskList.vue b/src/modules/task/components/TaskList.vue
index e398f82..5877490 100644
--- a/src/modules/task/components/TaskList.vue
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a599ae1..bbf2dac 100644
--- a/src/views/HomeView.vue
+++ b/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;
 }