Merge branch '28661-ci-tables-buttons' into 'master'

Fix CI tables action buttons are hidden is smaller screens

Closes #28661

See merge request !9578

app/assets/javascripts/environments/components/environment.js.es6

@@ -145,7 +145,7 @@ module.exports = Vue.component('environment-component', {
         </div>
       </div>
 
-      <div class="environments-container">
+      <div class="content-list environments-container">
         <div class="environments-list-loading text-center" v-if="isLoading">
           <i class="fa fa-spinner fa-spin"></i>
         </div>
@@ -181,12 +181,12 @@ module.exports = Vue.component('environment-component', {
             :terminal-icon-svg="terminalIconSvg"
             :commit-icon-svg="commitIconSvg">
           </environment-table>
-
-          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
-            :change="changePage"
-            :pageInfo="state.paginationInformation">
-          </table-pagination>
         </div>
+
+        <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+          :change="changePage"
+          :pageInfo="state.paginationInformation">
+        </table-pagination>
       </div>
     </div>
   `,

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -503,7 +503,7 @@ module.exports = Vue.component('environment-item', {
         </span>
       </td>
 
-      <td class="hidden-xs environments-actions">
+      <td class="environments-actions">
         <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
           <actions-component v-if="hasManualActions && canCreateDeployment"
             :play-icon-svg="playIconSvg"

app/assets/javascripts/environments/components/environments_table.js.es6

@@ -46,7 +46,7 @@ module.exports = Vue.component('environment-table-component', {
   },
 
   template: `
-    <table class="table ci-table environments">
+    <table class="table ci-table">
       <thead>
         <tr>
           <th class="environments-name">Environment</th>
@@ -54,7 +54,7 @@ module.exports = Vue.component('environment-table-component', {
           <th class="environments-build">Job</th>
           <th class="environments-commit">Commit</th>
           <th class="environments-date">Updated</th>
-          <th class="hidden-xs environments-actions"></th>
+          <th class="environments-actions"></th>
         </tr>
       </thead>
       <tbody>

app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6

@@ -32,7 +32,7 @@
       },
     },
     template: `
-      <td class="pipeline-actions hidden-xs">
+      <td class="pipeline-actions">
         <div class="pull-right">
           <div class="btn-group">
             <div class="btn-group" v-if="actions">

app/assets/javascripts/vue_shared/components/pipelines_table.js.es6

@@ -44,7 +44,7 @@ require('./pipelines_table_row');
             <th class="js-pipeline-commit pipeline-commit">Commit</th>
             <th class="js-pipeline-stages pipeline-stages">Stages</th>
             <th class="js-pipeline-date pipeline-date"></th>
-            <th class="js-pipeline-actions pipeline-actions hidden-xs"></th>
+            <th class="js-pipeline-actions pipeline-actions"></th>
           </tr>
         </thead>
         <tbody>

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;
+      }
     }
   }
 }

app/assets/stylesheets/pages/pipelines.scss

@@ -105,6 +105,7 @@
 @media (max-width: $screen-md-max) {
   .content-list {
     &.pipelines,
+    &.environments-container,
     &.builds-content-list {
       width: 100%;
       overflow: auto;