Add latest changes from gitlab-org/gitlab@master

6 files changed, 78 insertions, 54 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 211e1e30161..320bd4adaaa 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -474,6 +474,9 @@ img.emoji {
 .mw-70p { max-width: 70%; }
 .mw-90p { max-width: 90%; }
 
+// By default flex items don't shrink below their minimum content size.
+// To change this, these clases set a min-width or min-height
+.min-width-0 { min-width: 0; }
 .min-height-0 { min-height: 0; }
 
 .svg-w-100 {
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 76b12b2405f..52da1b9abfc 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -199,8 +199,8 @@
 /*
 * Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs)
 */
-@mixin build-trace {
-  background: $black;
+@mixin build-trace($background: $black) {
+  background: $background;
   color: $gray-darkest;
   white-space: pre;
   overflow-x: auto;
@@ -243,7 +243,7 @@
 /*
 * Mixin that handles the position of the controls placed on the top bar
 */
-@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size, $svg-display: 'block', $svg-top: '2px') {
+@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size, $svg-display: block, $svg-top: 2px) {
   display: flex;
   font-size: $control-font-size;
   justify-content: $flex-direction;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a3c1d8b1709..65efbabaa4f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -641,6 +641,14 @@ $issue-boards-breadcrumbs-height-xs: 63px;
 $issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs;
 $issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
 $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height;
+/*
+ The following heights are used in environment_logs.scss and are used for calculation of the log viewer height.
+*/
+$environment-logs-breadcrumbs-height: 63px;
+$environment-logs-breadcrumbs-height-md: $breadcrumb-min-height;
+
+$environment-logs-difference-xs-up: $header-height + $environment-logs-breadcrumbs-height;
+$environment-logs-difference-md-up: $header-height + $environment-logs-breadcrumbs-height-md;
 
 /*
 * Avatar
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f8b8a7271ce..f50d4bc736e 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -356,54 +356,3 @@
     }
   }
 }
-
-.environment-logs-viewer {
-  .build-trace-container {
-    position: relative;
-  }
-
-  .log-lines,
-  .gl-infinite-scroll-container {
-    // makes scrollbar visible by creating contrast
-    background: $black;
-  }
-
-  .gl-infinite-scroll-legend {
-    margin: 0;
-  }
-
-  .build-trace {
-    @include build-trace();
-    margin: 0;
-  }
-
-  .top-bar {
-    .date-time-picker-wrapper,
-    .dropdown-toggle {
-      @include media-breakpoint-up(md) {
-        width: 140px;
-      }
-
-      @include media-breakpoint-up(lg) {
-        width: 160px;
-      }
-    }
-
-    .controllers {
-      @include build-controllers(16px, flex-end, false, 2);
-    }
-  }
-
-  .btn-refresh svg {
-    top: 0;
-  }
-
-  .build-loader-animation {
-    @include build-loader-animation;
-  }
-
-  .log-footer {
-    color: $white-normal;
-    background-color: $gray-900;
-  }
-}
diff --git a/app/assets/stylesheets/pages/environment_logs.scss b/app/assets/stylesheets/pages/environment_logs.scss
new file mode 100644
index 00000000000..81cec14062f
--- /dev/null
+++ b/app/assets/stylesheets/pages/environment_logs.scss
@@ -0,0 +1,58 @@
+.environment-logs-page {
+  .content-wrapper {
+    padding-bottom: 0;
+  }
+}
+
+.environment-logs-viewer {
+  height: calc(100vh - #{$environment-logs-difference-xs-up});
+  min-height: 700px;
+
+  @include media-breakpoint-up(md) {
+    height: calc(100vh - #{$environment-logs-difference-md-up});
+  }
+
+  .with-performance-bar & {
+    height: calc(100vh - #{$environment-logs-difference-xs-up} - #{$performance-bar-height});
+
+    @include media-breakpoint-up(md) {
+      height: calc(100vh - #{$environment-logs-difference-md-up} - #{$performance-bar-height});
+    }
+  }
+
+  .top-bar {
+    .date-time-picker-wrapper,
+    .dropdown-toggle {
+      @include media-breakpoint-up(md) {
+        width: 140px;
+      }
+
+      @include media-breakpoint-up(lg) {
+        width: 160px;
+      }
+    }
+
+    .controllers {
+      @include build-controllers(16px, flex-end, false, 2, inline);
+    }
+  }
+
+  .log-lines,
+  .gl-infinite-scroll-container {
+    // makes scrollbar visible by creating contrast
+    background: $black;
+    height: 100%;
+  }
+
+  .build-trace {
+    @include build-trace($black);
+  }
+
+  .gl-infinite-scroll-legend {
+    margin: 0;
+  }
+
+  .build-loader-animation {
+    @include build-loader-animation;
+  }
+}
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index a03101c66ac..142078588df 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -138,6 +138,12 @@
   }
 
   .tree-item {
+    .file-icon,
+    .folder-icon {
+      position: relative;
+      top: 2px;
+    }
+
     .link-container {
       padding: 0;