Enhance styling of scroll buttons, make build log wide

1 files changed, 58 insertions, 10 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 66f7e7f97c8..76bb09c6c7d 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -15,29 +15,69 @@
   }
 
   .scroll-controls {
+    height: 100%;
+
     .scroll-step {
       width: 31px;
       margin: 0 0 0 auto;
     }
 
-    &.affix-bottom {
-      position: absolute;
+    .btn.sticky,
+    .autoscroll-container {
       right: 25px;
+      z-index: 1;
     }
 
-    &.affix {
-      right: 25px;
-      bottom: 15px;
-      z-index: 1;
+    .btn {
+      display: block;
+      margin-bottom: 10px;
+      color: $white-light;
+      border-color: $white-light;
+      background-color: transparent;
+
+      &.sticky {
+        position: fixed;
+      }
+    }
+
+    .autoscroll-container {
+      position: absolute;
+
+      .status-message {
+        color: $white-light;
+
+        label {
+          margin-left: 5px;
+          font-weight: normal;
+        }
+      }
+    }
+
+    #scroll-top.btn.sticky {
+      top: 115px;
+    }
+
+    #scroll-bottom.btn.sticky {
+      bottom: 5px;
     }
 
     &.sidebar-expanded {
-      right: #{$gutter_width + ($gl-padding * 2)};
+
+      .btn.sticky,
+      .autoscroll-container {
+        right: #{$gutter_width + ($gl-padding * 2)};
+      }
     }
 
-    a {
-      display: block;
-      margin-bottom: 10px;
+    @media (max-width: $screen-sm-max) {
+      i.fa {
+        margin-right: 0;
+      }
+
+      .scroll-step-label,
+      .status-message label {
+        display: none;
+      }
     }
   }
 
@@ -248,6 +288,12 @@
   }
 }
 
+.build-sidebar {
+  .container-fluid.container-limited {
+    max-width: 100%;
+  }
+}
+
 .build-detail-row {
   margin-bottom: 5px;
 
@@ -267,6 +313,8 @@
   margin-top: -17px;
 }
 
+
+
 @media (min-width: $screen-md-min) {
   .sub-nav.build {
     width: calc(100% + #{$gutter_width});