1 files changed, 80 insertions, 53 deletions

diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index bc151d2358f..00ebf4e26ac 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -83,6 +83,7 @@
 
       .avatar {
         float: none;
+        margin-right: 0;
       }
     }
 
@@ -124,35 +125,8 @@
 }
 
 .gl-responsive-table-row {
-  .environments-actions {
-    @media (min-width: $screen-md-min) {
-      text-align: right;
-    }
-
-    @media (max-width: $screen-sm-max) {
-      background-color: $gray-normal;
-      align-self: stretch;
-      border-top: 1px solid $border-color;
-
-      .environment-action-buttons {
-        padding: 10px;
-        display: flex;
-
-        .btn {
-          border-radius: 3px;
-        }
-
-        > .btn-group,
-        .external-url {
-          flex: 1;
-          flex-basis: 28px;
-        }
-
-        .dropdown-new {
-          width: 100%;
-        }
-      }
-    }
+  .branch-commit {
+    max-width: 100%;
   }
 }
 
@@ -166,23 +140,6 @@
   }
 }
 
-.prometheus-graph {
-  text {
-    fill: $gl-text-color;
-    stroke-width: 0;
-  }
-
-  .label-axis-text,
-  .text-metric-usage {
-    fill: $black;
-    font-weight: 500;
-  }
-
-  .legend-axis-text {
-    fill: $black;
-  }
-}
-
 .x-axis path,
 .y-axis path,
 .label-x-axis-line,
@@ -230,7 +187,7 @@
 }
 
 .text-metric {
-  font-weight: 600;
+  font-size: 12px;
 }
 
 .selected-metric-line {
@@ -240,20 +197,15 @@
 
 .deployment-line {
   stroke: $black;
-  stroke-width: 2;
+  stroke-width: 1;
 }
 
 .deploy-info-text {
   dominant-baseline: text-before-edge;
 }
 
-.text-metric-bold {
-  font-weight: 600;
-}
-
 .prometheus-state {
   margin-top: 10px;
-  display: none;
 
   .state-button-section {
     margin-top: 10px;
@@ -268,3 +220,78 @@
     width: 38px;
   }
 }
+
+.prometheus-panel {
+  margin-top: 20px;
+}
+
+.prometheus-svg-container {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding: 0;
+  padding-bottom: 100%;
+}
+
+.prometheus-svg-container > svg {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+
+  text {
+    fill: $gl-text-color;
+    stroke-width: 0;
+  }
+
+  .text-metric-bold {
+    font-weight: 600;
+  }
+
+  .label-axis-text,
+  .text-metric-usage {
+    fill: $black;
+    font-weight: 500;
+    font-size: 12px;
+  }
+
+  .legend-axis-text {
+    fill: $black;
+  }
+
+  .tick > text {
+    font-size: 12px;
+  }
+
+  .text-metric-title {
+    font-size: 12px;
+  }
+
+  .y-label-text,
+  .x-label-text {
+    fill: $gray-darkest;
+  }
+
+  .axis-tick {
+    stroke: $gray-darker;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    .label-axis-text,
+    .text-metric-usage,
+    .legend-axis-text {
+      font-size: 8px;
+    }
+
+    .tick > text {
+      font-size: 8px;
+    }
+  }
+}
+
+.prometheus-row {
+  h5 {
+    font-size: 16px;
+  }
+}