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,6 +181,7 @@ module.exports = Vue.component('environment-component', {
             :terminal-icon-svg="terminalIconSvg"
             :commit-icon-svg="commitIconSvg">
           </environment-table>
+        </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
           :change="changePage"
@@ -188,6 +189,5 @@ module.exports = Vue.component('environment-component', {
         </table-pagination>
       </div>
     </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,24 +15,15 @@
   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;
+  .table.ci-table {
+    .environments-actions {
+      min-width: 200px;
     }
 
     .environments-commit,
@@ -50,13 +41,11 @@
       width: 15%;
     }
 
-  .environment-name,
-  .environments-build-cell,
     .deployment-column {
+      > span {
         word-break: break-all;
       }
 
-  .deployment-column {
       .avatar {
         float: none;
       }
@@ -77,7 +66,6 @@
       }
     }
 
-
     .commit-title {
       margin: 0;
     }
@@ -97,7 +85,6 @@
     }
 
     .dropdown-menu {
-
       .fa {
         margin-right: 6px;
         color: $gl-text-color-secondary;
@@ -118,9 +105,7 @@
       }
     }
 
-  .deployment {
-    .build-column {
-
+    .deployment .build-column {
       .build-link {
         color: $gl-text-color;
       }
@@ -129,7 +114,6 @@
         float: none;
       }
     }
-  }
 
     .folder-icon {
       margin-right: 3px;
@@ -146,9 +130,7 @@
       color: $gl-text-color-secondary;
       display: inline-block;
     }
-}
 
-.table.ci-table.environments {
     .icon-container {
       width: 20px;
       text-align: center;
@@ -159,4 +141,5 @@
         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;