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">
+  <div>
-    <ol v-if="records.length" class="task-record-list">
+    <div class="content">
-      <li v-for="record in records" :key="record.id">
+      <h3 class="subtitle is-4">Records</h3>
-        <task-record-link :record="record" />
+      <ol v-if="recordsFromLastToFirst.length" class="task-record-list">
-      </li>
+        <li v-for="record in recordsFromLastToFirst" :key="record.id">
-    </ol>
+          <task-record-link :record="record" />
-    <div v-else>No record yet</div>
+        </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>

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">
-      <ol>
+      <div class="column content is-large">
-        <li v-for="step in task.steps" :key="step.id">
+        <h3 class="subtitle is-4">Tasks</h3>
-          <div>{{ step.title }} | {{ step.estimation }}</div>
+        <ol>
-        </li>
+          <li v-for="step in task.steps" :key="step.id">
-      </ol>
+            <div class="step-item">
+              <span>{{ step.title }}</span>
+              <span class="tag">{{ step.estimation }} minutes</span>
+            </div>
+          </li>
+        </ol>
+      </div>
+      <task-record-list class="column" :task-id="id" />
     </div>
-    <task-record-list :task-id="id" />
   </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>