From 6bf41b9d61ec0e20ac9a5c6d369be1edd82278f0 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 15 Apr 2023 18:55:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20(task=20record)=20blob=20in=20st?=
 =?UTF-8?q?ep=20#=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/record/components/StepRecord.vue | 27 +++++++++++---------
 src/modules/record/components/TaskRecord.vue |  2 +-
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/modules/record/components/StepRecord.vue b/src/modules/record/components/StepRecord.vue
index 4a38ed4..ac5bbd2 100644
--- a/src/modules/record/components/StepRecord.vue
+++ b/src/modules/record/components/StepRecord.vue
@@ -51,19 +51,21 @@ const isSuperiorToEstimation = computed(() => {
 
 <template>
   <tr v-if="step" class="step-record">
-    <td class="rank">
-      {{ stepNumber }}
+    <td class="td-rank">
+      <div class="rank">
+        <div v-if="isCurrentStep" class="blob green"></div>
+        <span v-else>
+          {{ stepNumber }}
+        </span>
+      </div>
     </td>
     <td class="status">
       <span v-if="stepRecord?.end && !isSuperiorToEstimation">✅</span>
       <span v-else-if="isSuperiorToEstimation"> ⚠️ </span>
       <span v-else>⌛</span>
     </td>
-    <td>
-      <div class="step-title">
-        <div v-if="isCurrentStep" class="blob green"></div>
-        {{ step.title }}
-      </div>
+    <td class="step-title">
+      {{ step.title }}
     </td>
     <td class="estimation minutes">{{ step.estimation }} min</td>
     <td class="minutes" v-if="stepRecord">{{ duration }} min</td>
@@ -85,22 +87,23 @@ $blob-size: 15px;
 
   .rank {
     text-align: right;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    min-height: 30px;
   }
 
   .blob {
     border-radius: 50%;
-    min-height: $blob-size;
-    min-width: $blob-size;
+    height: $blob-size;
+    width: $blob-size;
     background: rgba(51, 217, 178, 1);
     box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
     animation: pulse 2s infinite;
   }
 
   .step-title {
-    display: flex;
-    align-items: center;
     padding-right: 1rem;
-    gap: 1rem;
   }
 
   .minutes {
diff --git a/src/modules/record/components/TaskRecord.vue b/src/modules/record/components/TaskRecord.vue
index b9a5d35..c830412 100644
--- a/src/modules/record/components/TaskRecord.vue
+++ b/src/modules/record/components/TaskRecord.vue
@@ -46,7 +46,7 @@ const isSuperiorToEstimation = computed(() => {
     </h1>
     <h2 class="subtitle" v-if="record">{{ formatLongDate(record.start) }}</h2>
     <record-controls :task-id="taskId" :record-id="recordId" />
-    <table class="table is-striped is-narrow is-hoverable is-fullwidth">
+    <table class="table is-striped is-hoverable is-fullwidth">
       <thead>
         <tr>
           <th>#</th>