better styling for task view with tags

src/modules/record/components/TaskRecordList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { createUuid } from '@/shared/create-uuid'
+import { computed } from 'vue'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 import TaskRecordLink from './TaskRecordLink.vue'
 
@@ -9,25 +10,32 @@ const props = defineProps<{
 
 const recordStore = useTaskRecordStore()
 
-const records = recordStore.getTaskRecords(props.taskId)
+const recordsFromLastToFirst = computed(() =>
+  recordStore
+    .getTaskRecords(props.taskId)
+    .sort((a, b) => (a.start > b.start ? -1 : 1))
+)
 const newRecordId = createUuid()
 </script>
 
 <template>
-  <div class="content">
-    <ol v-if="records.length" class="task-record-list">
-      <li v-for="record in records" :key="record.id">
-        <task-record-link :record="record" />
-      </li>
-    </ol>
-    <div v-else>No record yet</div>
+  <div>
+    <div class="content">
+      <h3 class="subtitle is-4">Records</h3>
+      <ol v-if="recordsFromLastToFirst.length" class="task-record-list">
+        <li v-for="record in recordsFromLastToFirst" :key="record.id">
+          <task-record-link :record="record" />
+        </li>
+      </ol>
+      <div v-else>No record yet</div>
+    </div>
+    <router-link
+      :to="{
+        name: 'record-view',
+        params: { taskId, recordId: newRecordId }
+      }"
+      class="button is-primary is-light"
+      >start a new record</router-link
+    >
   </div>
-  <router-link
-    :to="{
-      name: 'record-view',
-      params: { taskId, recordId: newRecordId }
-    }"
-    class="button is-primary is-light"
-    >start a new record</router-link
-  >
 </template>

src/modules/task/components/TaskList.vue

@@ -14,7 +14,7 @@ const taskStore = useTaskStore()
           class="button is-link is-outlined"
           >{{ task.title }}</router-link
         >
-        <span> {{ task.totalEstimation }} minutes </span>
+        <span class="tag">{{ task.totalEstimation }} minutes</span>
         <span>{{ formatDate(task.date) }}</span>
       </li>
     </ul>