Hide log size in mobile

app/assets/stylesheets/pages/builds.scss

@@ -49,6 +49,7 @@
     font-size: 12px;
     border-radius: 0;
     border: 0;
+    padding: $grid-size;
 
     .bash {
       display: block;
@@ -57,14 +58,13 @@
 
   .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: $header-height;
+    padding: $grid-size;
 
     &.affix {
       top: $header-height;
@@ -90,9 +90,6 @@
     }
 
     .truncated-info {
-      margin: 0 auto;
-      align-self: center;
-
       .truncated-info-size {
         margin: 0 5px;
       }
@@ -118,7 +115,11 @@
 
       .controllers-buttons {
         color: $gl-text-color;
-        margin: 0 10px;
+        margin: 0 $grid-size;
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
 
       .btn-scroll.animate {

app/views/projects/jobs/show.html.haml

@@ -57,13 +57,13 @@
 
     .build-trace-container.prepend-top-default
       .top-bar.js-top-bar
-        .js-truncated-info.truncated-info.hidden<
+        .js-truncated-info.truncated-info.hidden-xs.pull-left.hidden<
           Showing last
           %span.js-truncated-info-size.truncated-info-size><
           KiB of log -
           %a.js-raw-link.raw-link{ href: raw_project_job_path(@project, @build) }>< Complete Raw
 
-        .controllers
+        .controllers.pull-right
           - if @build.has_trace?
             = link_to raw_project_job_path(@project, @build),
                     title: 'Show complete raw',

changelogs/unreleased/40016-log-header.yml

+---
+title: Hide log size for mobile screens
+merge_request:
+author:
+type: fixed