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,14 +10,20 @@ 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>
     <div class="content">
-    <ol v-if="records.length" class="task-record-list">
-      <li v-for="record in records" :key="record.id">
+      <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>
@@ -30,4 +37,5 @@ const newRecordId = createUuid()
       class="button is-primary is-light"
       >start a new record</router-link
     >
+  </div>
 </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>

src/views/task/TaskView.vue

@@ -24,14 +24,30 @@ const task = computed(() => taskStore.getTask(props.id))
       class="button is-link"
       >user story link</a
     >
-    <div class="content is-large">
+    <div class="columns">
+      <div class="column content is-large">
+        <h3 class="subtitle is-4">Tasks</h3>
         <ol>
           <li v-for="step in task.steps" :key="step.id">
-          <div>{{ step.title }} | {{ step.estimation }}</div>
+            <div class="step-item">
+              <span>{{ step.title }}</span>
+              <span class="tag">{{ step.estimation }} minutes</span>
+            </div>
           </li>
         </ol>
       </div>
-    <task-record-list :task-id="id" />
+      <task-record-list class="column" :task-id="id" />
+    </div>
   </div>
   <div v-else>Task not found</div>
 </template>
+
+<style scoped>
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  justify-content: space-between;
+  max-width: 400px;
+}
+</style>