Responsive environment tables

1 files changed, 44 insertions, 28 deletions

diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index f269d53093d..bc151d2358f 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -11,34 +11,7 @@
 }
 
 .environments-container {
-  .table-holder {
-    width: 100%;
-
-    @media (max-width: $screen-sm-max) {
-      overflow: auto;
-    }
-  }
-
-  .table.ci-table {
-    .environments-actions {
-      min-width: 300px;
-    }
-
-    .environments-commit,
-    .environments-actions {
-      width: 20%;
-    }
-
-    .environments-date {
-      width: 10%;
-    }
-
-    .environments-name,
-    .environments-deploy,
-    .environments-build {
-      width: 15%;
-    }
-
+  .ci-table {
     .deployment-column {
       > span {
         word-break: break-all;
@@ -150,6 +123,49 @@
   }
 }
 
+.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%;
+        }
+      }
+    }
+  }
+}
+
+.folder-row {
+  padding: 15px 0;
+  border-bottom: 1px solid $white-normal;
+
+  @media (max-width: $screen-sm-max) {
+    border-top: 1px solid $white-normal;
+    margin-top: 10px;
+  }
+}
+
 .prometheus-graph {
   text {
     fill: $gl-text-color;