Merge branch '5276-1-remove-build-page-from-ide-terminal-element' into 'master'

[Part 1] 5276 Remove 'build-page' from 'ide-terminal' element

See merge request gitlab-org/gitlab-ee!14026

app/assets/stylesheets/framework/mixins.scss

@@ -218,16 +218,22 @@
   }
 }
 
-@mixin build-trace-top-bar($height) {
+// Used in EE for Web Terminal
+@mixin build-trace-bar($height) {
   height: $height;
   min-height: $height;
   background: $gray-light;
   border: 1px solid $border-color;
   color: $gl-text-color;
+  padding: $grid-size;
+}
+
+@mixin build-trace-top-bar($height) {
+  @include build-trace-bar($height);
+
   position: -webkit-sticky;
   position: sticky;
   top: $header-height;
-  padding: $grid-size;
 
   .with-performance-bar & {
     top: $header-height + $performance-bar-height;

app/assets/stylesheets/page_bundles/_ide_mixins.scss

@@ -2,17 +2,17 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  margin-top: -$grid-size;
-  margin-bottom: -$grid-size;
 
-  &.build-page .top-bar {
+  .top-bar {
+    @include build-trace-bar(35px);
+
     top: 0;
-    height: auto;
     font-size: 12px;
     border-top-right-radius: $border-radius-default;
-  }
-
-  .top-bar {
     margin-left: -$gl-padding;
+
+    .controllers {
+      @include build-controllers(15px, center, false, 0, inline, 0);
+    }
   }
 }

ee/app/assets/javascripts/ide/components/terminal/session.vue

@@ -33,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="session" class="ide-terminal build-page d-flex flex-column">
+  <div v-if="session" class="ide-terminal d-flex flex-column">
     <header class="ide-job-header d-flex align-items-center">
       <h5>{{ __('Web Terminal') }}</h5>
       <div class="ml-auto align-self-center">

ee/app/assets/stylesheets/page_bundles/ide.scss

 @import 'page_bundles/ide_mixins';
 
+.ide-right-sidebar {
+  .multi-file-commit-panel-inner.ide-right-sidebar-terminal {
+    padding-top: 0;
+  }
+}
+
 .ide-terminal {
   @include ide-trace-view();