1 files changed, 39 insertions, 7 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index 53d9baffd78..a6ca629a358 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -11,16 +11,48 @@ export default {
       required: true,
     },
   },
+  computed: {
+    jobId() {
+      return `#${this.job.id}`;
+    },
+  },
 };
 </script>
 
 <template>
-  <div>
-    <ci-icon :status="job.status" />
-    {{ job.name }}
-    <a
-      :href="job.build_path"
-      target="_blank"
-    >#{{ job.id }}</a>
+  <div class="ide-job-item">
+    <ci-icon
+      :status="job.status"
+      :borderless="true"
+      :size="24"
+    />
+    <span class="prepend-left-8">
+      {{ job.name }}
+      <a
+        :href="job.build_path"
+        target="_blank"
+        v-text="jobId"
+      >
+      </a>
+    </span>
   </div>
 </template>
+
+<style scoped>
+.ide-job-item {
+  display: flex;
+  padding: 16px;
+}
+
+.ide-job-item:not(:last-child) {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.ide-job-item .ci-status-icon {
+  display: flex;
+  justify-content: center;
+  height: 20px;
+  margin-top: -2px;
+  overflow: hidden;
+}
+</style>