1 files changed, 21 insertions, 23 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
index cd44c998074..960af030421 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
@@ -19,53 +19,51 @@ export default {
     duration() {
       return this.pipeline?.details?.duration;
     },
-    finishedTime() {
-      return this.pipeline?.details?.finished_at;
-    },
-    skipped() {
-      return this.pipeline?.details?.status?.label === 'skipped';
-    },
-    stuck() {
-      return this.pipeline.flags.stuck;
-    },
     durationFormatted() {
       return durationTimeFormatted(this.duration);
     },
+    finishedTime() {
+      return this.pipeline?.details?.finished_at;
+    },
     showInProgress() {
       return !this.duration && !this.finishedTime && !this.skipped;
     },
     showSkipped() {
       return !this.duration && !this.finishedTime && this.skipped;
     },
+    skipped() {
+      return this.pipeline?.details?.status?.label === 'skipped';
+    },
+    stuck() {
+      return this.pipeline.flags.stuck;
+    },
   },
 };
 </script>
 <template>
-  <div class="gl-display-block">
-    <span v-if="showInProgress" data-testid="pipeline-in-progress">
+  <div class="gl-display-flex gl-flex-direction-column time-ago">
+    <span
+      v-if="showInProgress"
+      class="gl-display-inline-flex gl-align-items-center"
+      data-testid="pipeline-in-progress"
+    >
       <gl-icon v-if="stuck" name="warning" class="gl-mr-2" :size="12" data-testid="warning-icon" />
-      <gl-icon
-        v-else
-        name="hourglass"
-        class="gl-vertical-align-baseline! gl-mr-2"
-        :size="12"
-        data-testid="hourglass-icon"
-      />
+      <gl-icon v-else name="hourglass" class="gl-mr-2" :size="12" data-testid="hourglass-icon" />
       {{ s__('Pipeline|In progress') }}
     </span>
 
     <span v-if="showSkipped" data-testid="pipeline-skipped">
-      <gl-icon name="status_skipped_borderless" class="gl-mr-2" :size="16" />
+      <gl-icon name="status_skipped_borderless" />
       {{ s__('Pipeline|Skipped') }}
     </span>
 
-    <p v-if="duration" class="duration">
-      <gl-icon name="timer" class="gl-vertical-align-baseline!" :size="12" />
+    <p v-if="duration" class="duration gl-display-inline-flex gl-align-items-center">
+      <gl-icon name="timer" class="gl-mr-2" :size="12" />
       {{ durationFormatted }}
     </p>
 
-    <p v-if="finishedTime" class="finished-at d-none d-md-block">
-      <gl-icon name="calendar" class="gl-vertical-align-baseline!" :size="12" />
+    <p v-if="finishedTime" class="finished-at gl-display-inline-flex gl-align-items-center">
+      <gl-icon name="calendar" class="gl-mr-2" :size="12" />
 
       <time
         v-gl-tooltip