💄 (tasks) adjust designs

src/modules/record/components/TaskRecord.vue

@@ -91,3 +91,10 @@ const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
     </div>
   </main>
 </template>
+
+<style lang="scss" scoped>
+.title {
+  display: flex;
+  align-items: center;
+}
+</style>

src/modules/record/components/TaskRecordPreview.vue

@@ -23,11 +23,7 @@ const { duration } = useTaskRecordMetadata(taskRecord)
       class="button is-primary is-light"
       >recording page</router-link
     >
-    <div v-if="taskRecord" class="task-record-link-container content">
-      <span v-if="duration !== null"
-        >Last record took {{ duration }} minutes</span
-      >
-    </div>
+    <div v-if="duration !== null">Last record took {{ duration }} minutes</div>
     <div v-else>No record yet</div>
   </div>
 </template>

src/views/task/TaskView.vue

@@ -55,6 +55,8 @@ const deleteTask = () => {
       class="button is-link"
       >user story link</a
     >
+    <task-record-preview :task-id="id" />
+    <hr />
     <div class="content">
       <ol>
         <li v-for="step in task.steps" :key="step.id">
@@ -65,7 +67,6 @@ const deleteTask = () => {
         </li>
       </ol>
     </div>
-    <task-record-preview :task-id="id" />
   </div>
   <task-not-found v-else />
 </template>