design update

app/assets/javascripts/ide/components/jobs/detail.vue

@@ -67,7 +67,7 @@ export default {
 
 <template>
   <div class="ide-pipeline build-page d-flex flex-column flex-fill">
-    <header class="ide-tree-header ide-pipeline-header">
+    <header class="ide-job-header d-flex align-items-center">
       <button
         class="btn btn-default btn-sm d-flex"
         @click="setDetailJob(null)"
@@ -78,7 +78,7 @@ export default {
         {{ __('View jobs') }}
       </button>
     </header>
-    <div class="top-bar d-flex">
+    <div class="top-bar d-flex border-left-0">
       <job-description
         :job="detailJob"
       />
@@ -110,7 +110,7 @@ export default {
       </div>
     </div>
     <pre
-      class="build-trace mb-0"
+      class="build-trace mb-0 h-100"
       ref="buildTrace"
       @scroll="scrollBuildLog"
     >

app/assets/javascripts/ide/components/jobs/item.vue

@@ -27,13 +27,16 @@ export default {
 <template>
   <div class="ide-job-item">
     <job-description
+      class="append-right-default"
       :job="job"
     />
+    <div class="ml-auto align-self-center">
       <button
-      class="btn btn-default btn-sm ml-auto"
+        class="btn btn-default btn-sm"
         @click="clickViewLog"
       >
         {{ __('View log') }}
       </button>
     </div>
+  </div>
 </template>

app/assets/stylesheets/pages/repo.scss

@@ -1146,8 +1146,13 @@
 }
 
 .ide-external-link {
+  position: relative;
+
   svg {
     display: none;
+    position: absolute;
+    top: 2px;
+    right: -$gl-padding;
   }
 
   &:hover,
@@ -1178,6 +1183,8 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  margin-top: -$grid-size;
+  margin-bottom: -$grid-size;
 
   .empty-state {
     margin-top: auto;
@@ -1194,6 +1201,17 @@
       margin: 0;
     }
   }
+
+  .build-trace,
+  .top-bar {
+    margin-left: -$gl-padding;
+  }
+
+  .top-bar {
+    top: 0;
+    font-size: 12px;
+    border-top-right-radius: $border-radius-default;
+  }
 }
 
 .ide-pipeline-list {
@@ -1222,6 +1240,7 @@
   .ci-status-icon {
     display: flex;
     justify-content: center;
+    min-width: 24px;
     overflow: hidden;
   }
 }
@@ -1251,3 +1270,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.ide-job-header {
+  min-height: 60px;
+}