CE Port of "Web Terminal FE"

2 files changed, 21 insertions, 14 deletions

diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
new file mode 100644
index 00000000000..896a3466cb4
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
@@ -0,0 +1,18 @@
+@mixin ide-trace-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-top: -$grid-size;
+  margin-bottom: -$grid-size;
+
+  &.build-page .top-bar {
+    top: 0;
+    height: auto;
+    font-size: 12px;
+    border-top-right-radius: $border-radius-default;
+  }
+
+  .top-bar {
+    margin-left: -$gl-padding;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 07d82e984ba..98d0a2d43ea 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1,5 +1,6 @@
 @import 'framework/variables';
 @import 'framework/mixins';
+@import './ide_mixins';
 
 $search-list-icon-width: 18px;
 $ide-activity-bar-width: 60px;
@@ -1111,11 +1112,7 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-pipeline {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  margin-top: -$grid-size;
-  margin-bottom: -$grid-size;
+  @include ide-trace-view();
 
   .empty-state {
     margin-top: auto;
@@ -1133,17 +1130,9 @@ $ide-commit-header-height: 48px;
     }
   }
 
-  .build-trace,
-  .top-bar {
+  .build-trace {
     margin-left: -$gl-padding;
   }
-
-  &.build-page .top-bar {
-    top: 0;
-    height: auto;
-    font-size: 12px;
-    border-top-right-radius: $border-radius-default;
-  }
 }
 
 .ide-pipeline-list {