Remove hidden-xs classes from last columns in environments and pipelines table.28661-ci-tables-buttons

Transform pipelines table css to match structure of pipelines table
Make environments table overflow

1 files changed, 85 insertions, 102 deletions

diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index f789ae1ccd3..77e09e66340 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -15,112 +15,97 @@
   padding-top: 20px;
 }
 
-@media (max-width: $screen-xs-max) {
-  .environments-container {
+.environments-container {
+  .table-holder {
     width: 100%;
     overflow: auto;
   }
-}
-
-.environments {
-  table-layout: fixed;
-
-  .environments-commit,
-  .environments-actions,
-  .environments-deploy,
-  .environments-build,
-  .environments-date {
-    position: static;
-    float: none;
-    display: table-cell;
-  }
-
-  .environments-commit,
-  .environments-actions {
-    width: 20%;
-  }
-
-  .environments-date {
-    width: 10%;
-  }
 
-  .environments-name,
-  .environments-deploy,
-  .environments-build {
-    width: 15%;
-  }
-
-  .environment-name,
-  .environments-build-cell,
-  .deployment-column {
-    word-break: break-all;
-  }
-
-  .deployment-column {
-    .avatar {
-      float: none;
+  .table.ci-table {
+    .environments-actions {
+      min-width: 200px;
     }
-  }
 
-  .btn-group {
+    .environments-commit,
+    .environments-actions {
+      width: 20%;
+    }
 
-    > a {
-      color: $gl-text-color-secondary;
+    .environments-date {
+      width: 10%;
     }
 
-    svg path {
-      fill: $gl-text-color-secondary;
+    .environments-name,
+    .environments-deploy,
+    .environments-build {
+      width: 15%;
     }
 
-    .dropdown {
-      outline: none;
+    .deployment-column {
+      > span {
+        word-break: break-all;
+      }
+
+      .avatar {
+        float: none;
+      }
     }
-  }
 
+    .btn-group {
 
-  .commit-title {
-    margin: 0;
-  }
+      > a {
+        color: $gl-text-color-secondary;
+      }
 
-  .avatar-image-container {
-    text-decoration: none;
-  }
+      svg path {
+        fill: $gl-text-color-secondary;
+      }
 
-  .icon-play {
-    height: 13px;
-    width: 12px;
-  }
+      .dropdown {
+        outline: none;
+      }
+    }
 
-  .external-url,
-  .dropdown-new {
-    color: $gl-text-color-secondary;
-  }
+    .commit-title {
+      margin: 0;
+    }
 
-  .dropdown-menu {
+    .avatar-image-container {
+      text-decoration: none;
+    }
 
-    .fa {
-      margin-right: 6px;
-      color: $gl-text-color-secondary;
+    .icon-play {
+      height: 13px;
+      width: 12px;
     }
-  }
 
-  .build-link,
-  .branch-name {
-    color: $gl-text-color;
-  }
+    .external-url,
+    .dropdown-new {
+      color: $gl-text-color-secondary;
+    }
 
-  .stop-env-link,
-  .external-url {
-    color: $gl-text-color-secondary;
+    .dropdown-menu {
+      .fa {
+        margin-right: 6px;
+        color: $gl-text-color-secondary;
+      }
+    }
 
-    .stop-env-icon {
-      font-size: 14px;
+    .build-link,
+    .branch-name {
+      color: $gl-text-color;
     }
-  }
 
-  .deployment {
-    .build-column {
+    .stop-env-link,
+    .external-url {
+      color: $gl-text-color-secondary;
+
+      .stop-env-icon {
+        font-size: 14px;
+      }
+    }
 
+    .deployment .build-column {
       .build-link {
         color: $gl-text-color;
       }
@@ -129,34 +114,32 @@
         float: none;
       }
     }
-  }
-
-  .folder-icon {
-    margin-right: 3px;
-    color: $gl-text-color-secondary;
-    display: inline-block;
 
-    .fa:nth-child(1) {
+    .folder-icon {
       margin-right: 3px;
+      color: $gl-text-color-secondary;
+      display: inline-block;
+
+      .fa:nth-child(1) {
+        margin-right: 3px;
+      }
     }
-  }
 
-  .folder-name {
-    cursor: pointer;
-    color: $gl-text-color-secondary;
-    display: inline-block;
-  }
-}
+    .folder-name {
+      cursor: pointer;
+      color: $gl-text-color-secondary;
+      display: inline-block;
+    }
 
-.table.ci-table.environments {
-  .icon-container {
-    width: 20px;
-    text-align: center;
-  }
+    .icon-container {
+      width: 20px;
+      text-align: center;
+    }
 
-  .branch-commit {
-    .commit-id {
-      margin-right: 0;
+    .branch-commit {
+      .commit-id {
+        margin-right: 0;
+      }
     }
   }
 }