Create responsive mobile view for pipelines table

1 files changed, 23 insertions, 21 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 4781a8ff1da..8333ec0fbc3 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -23,7 +23,7 @@ export default {
 };
 </script>
 <template>
-  <td>
+  <div class="table-section section-15 hidden-xs hidden-sm">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
@@ -42,24 +42,26 @@ export default {
       class="js-pipeline-url-api api">
       API
     </span>
-    <span
-      v-if="pipeline.flags.latest"
-      class="js-pipeline-url-lastest label label-success"
-      title="Latest pipeline for this branch"
-      ref="tooltip">
-      latest
-    </span>
-    <span
-      v-if="pipeline.flags.yaml_errors"
-      class="js-pipeline-url-yaml label label-danger"
-      :title="pipeline.yaml_errors"
-      ref="tooltip">
-      yaml invalid
-    </span>
-    <span
-      v-if="pipeline.flags.stuck"
-      class="js-pipeline-url-stuck label label-warning">
-      stuck
-    </span>
-  </td>
+    <div class="label-container">
+      <span
+        v-if="pipeline.flags.latest"
+        class="js-pipeline-url-latest label label-success"
+        title="Latest pipeline for this branch"
+        ref="tooltip">
+        latest
+      </span>
+      <span
+        v-if="pipeline.flags.yaml_errors"
+        class="js-pipeline-url-yaml label label-danger"
+        :title="pipeline.yaml_errors"
+        ref="tooltip">
+        yaml invalid
+      </span>
+      <span
+        v-if="pipeline.flags.stuck"
+        class="js-pipeline-url-stuck label label-warning">
+        stuck
+      </span>
+    </div>
+  </div>
 </template>