Merge branch '13810-cluster-environments-table' into 'master'

Add responsivity to environments table

See merge request gitlab-org/gitlab!25501

changelogs/unreleased/13810-cluster-environments-table.yml

+---
+title: Add responsivity to cluster environments table
+merge_request: 25501
+author:
+type: fixed

ee/app/assets/javascripts/clusters/components/environments.vue

@@ -71,14 +71,14 @@ export default {
   },
   created() {
     this.$options.fields = [
-      { key: 'project', label: __('Project'), class: 'pl-0 pr-5 text-nowrap' },
-      { key: 'name', label: __('Environment'), class: 'pl-0 pr-5' },
-      { key: 'lastDeployment', label: __('Job'), class: 'pl-0 pr-5 text-nowrap' },
-      { key: 'rolloutStatus', label: __('Pods in use'), class: 'pl-0 pr-5' },
+      { key: 'project', label: __('Project'), class: 'pl-md-0 pr-md-5 text-nowrap' },
+      { key: 'name', label: __('Environment'), class: 'pl-md-0 pr-md-5' },
+      { key: 'lastDeployment', label: __('Job'), class: 'pl-md-0 pr-md-5 text-nowrap' },
+      { key: 'rolloutStatus', label: __('Pods in use'), class: 'pl-md-0 pr-md-5' },
       {
         key: 'updatedAt',
         label: __('Last updated'),
-        class: 'pl-0 pr-0 text-md-right text-nowrap',
+        class: 'pl-md-0 pr-md-0 text-md-right text-nowrap',
       },
     ];
   },
@@ -105,6 +105,7 @@ export default {
       :fields="$options.fields"
       :items="environments"
       head-variant="white"
+      stacked="md"
     >
       <!-- column: Project -->
       <template #cell(project)="data">
@@ -134,7 +135,10 @@ export default {
         />
 
         <!-- Rollout Instances -->
-        <div v-else-if="hasInstances(row.item.rolloutStatus)" class="d-flex flex-wrap flex-row">
+        <div
+          v-else-if="hasInstances(row.item.rolloutStatus)"
+          class="d-flex flex-wrap flex-row justify-content-end justify-content-md-start"
+        >
           <template v-for="(instance, i) in row.item.rolloutStatus.instances">
             <deployment-instance
               :key="i"

ee/spec/frontend/clusters/components/environments_spec.js

@@ -60,6 +60,10 @@ describe('Environments', () => {
       tableHeaders.forEach((headerText, i) => expect(headers.at(i).text()).toEqual(headerText));
     });
 
+    it('should stack on smaller devices', () => {
+      expect(table.classes()).toContain('b-table-stacked-md');
+    });
+
     describe('deployment instances', () => {
       let tableRows;