1 files changed, 52 insertions, 57 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 9cff99b839c..23c06eca3c3 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -37,65 +37,77 @@
 }
 
 .build-page {
-  .sticky {
-    position: absolute;
-    left: 0;
-    right: 0;
+  .build-trace-container {
+    position: relative;
   }
 
-  .build-trace-container {
-    position: absolute;
-    top: 225px;
-    left: 15px;
-    bottom: 10px;
+  .build-trace {
     background: $black;
     color: $gray-darkest;
-    font-family: $monospace_font;
+    white-space: pre;
+    overflow-x: auto;
     font-size: 12px;
+    border-radius: 0;
+    border: none;
 
-    &.sidebar-expanded {
-      right: 305px;
+    .bash {
+      display: block;
     }
+  }
 
-    &.sidebar-collapsed {
-      right: 16px;
+  .top-bar {
+    height: 35px;
+    display: flex;
+    justify-content: flex-end;
+    background: $gray-light;
+    border: 1px solid $border-color;
+    color: $gl-text-color;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 50px;
+
+    &.affix {
+      top: 50px;
     }
 
-    code {
-      background: $black;
-      color: $gray-darkest;
+    // with sidebar
+    &.affix.sidebar-expanded {
+      right: 306px;
+      left: 16px;
     }
 
-    .top-bar {
-      top: 0;
-      height: 35px;
-      display: flex;
-      justify-content: flex-end;
-      background: $gray-light;
-      border: 1px solid $border-color;
-      color: $gl-text-color;
+    // without sidebar
+    &.affix.sidebar-collapsed {
+      right: 16px;
+      left: 16px;
+    }
 
-      .truncated-info {
-        margin: 0 auto;
-        align-self: center;
+    &.affix-top {
+      position: absolute;
+      right: 0;
+      left: 0;
+    }
 
-        .truncated-info-size {
-          margin: 0 5px;
-        }
+    .truncated-info {
+      margin: 0 auto;
+      align-self: center;
 
-        .raw-link {
-          color: $gl-text-color;
-          margin-left: 5px;
-          text-decoration: underline;
-        }
+      .truncated-info-size {
+        margin: 0 5px;
+      }
+
+      .raw-link {
+        color: $gl-text-color;
+        margin-left: 5px;
+        text-decoration: underline;
       }
     }
 
     .controllers {
       display: flex;
-      align-self: center;
       font-size: 15px;
-      margin-bottom: 4px;
+      justify-content: center;
+      align-items: center;
 
       svg {
         height: 15px;
@@ -103,17 +115,9 @@
         fill: $gl-text-color;
       }
 
-      .controllers-buttons,
-      .btn-scroll {
-        color: $gl-text-color;
-        height: 15px;
-        vertical-align: middle;
-        padding: 0;
-        width: 12px;
-      }
-
       .controllers-buttons {
-        margin: 1px 10px;
+        color: $gl-text-color;
+        margin: 0 10px;
       }
 
       .btn-scroll.animate {
@@ -143,15 +147,6 @@
     }
   }
 
-  .bash {
-    top: 35px;
-    left: 10px;
-    bottom: 0;
-    padding: 10px 20px 20px 5px;
-    white-space: pre-wrap;
-    overflow: auto;
-  }
-
   .environment-information {
     border: 1px solid $border-color;
     padding: 8px $gl-padding 12px;