Resolve "Too much x-axis padding on the Environments Dashboard"

changelogs/unreleased/195692-too-much-x-axis-padding-on-the-environments-dashboard-content.yml

+---
+title: Resolve incorrect x-axis padding on the Environments Dashboard
+merge_request: 32533
+author:
+type: fixed

ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue

@@ -127,7 +127,7 @@ export default {
 </script>
 
 <template>
-  <div class="operations-dashboard">
+  <div class="environments-dashboard">
     <gl-modal
       :modal-id="$options.modalId"
       :title="$options.addProjectsModalHeader"
@@ -169,21 +169,21 @@ export default {
       >
         <template #readMoreLink>
           <gl-link :href="environmentsDashboardHelpPath" target="_blank" rel="noopener noreferrer">
-            {{ s__('EnvironmentsDashboard|Read more.') }}
+            {{ s__('EnvironmentsDashboard|More information') }}
           </gl-link>
         </template>
       </gl-sprintf>
     </p>
     <div class="prepend-top-default">
-      <div v-if="projects.length" class="dashboard-cards">
-        <div v-for="project in projects" :key="project.id" class="column prepend-top-default">
+      <div v-if="projects.length">
+        <div v-for="project in projects" :key="project.id">
           <project-header :project="project" @remove="removeProject" />
-          <div class="row">
+          <div class="row prepend-top-default no-gutters mx-n2">
             <environment
               v-for="environment in project.environments"
               :key="environment.id"
               :environment="environment"
-              class="col-12 col-md-6 col-xl-4 px-2 prepend-top-default"
+              class="col-12 col-md-6 col-xl-4 px-2"
             />
           </div>
         </div>

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue

@@ -127,7 +127,7 @@ export default {
 
     <div :class="cardClasses" class="dashboard-card-body card-body">
       <div v-if="lastDeployment" class="row">
-        <div class="col-1 align-self-center">
+        <div class="col-1 align-self-center px-3">
           <user-avatar-link
             v-if="user"
             :link-href="user.path"
@@ -162,7 +162,7 @@ export default {
         </div>
 
         <div
-          class="col-sm-4 mt-0 pl-5 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
+          class="col-sm-3 mt-0 pl-6 pr-0 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
         >
           <time-ago
             v-if="shouldShowTimeAgo"

ee/app/assets/javascripts/environments_dashboard/components/dashboard/project_header.vue

@@ -33,7 +33,7 @@ export default {
 
 <template>
   <div
-    class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2"
+    class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
   >
     <div class="d-flex align-items-center">
       <project-avatar :project="project.namespace" :size="20" class="flex-shrink-0" />

ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`dashboard should match the snapshot 1`] = `
 <div
-  class="operations-dashboard"
+  class="environments-dashboard"
 >
   <gl-modal-stub
     modalclass=""
@@ -57,7 +57,7 @@ exports[`dashboard should match the snapshot 1`] = `
       target="_blank"
     >
       
-          Read more.
+          More information
         
     </gl-link-stub>
   </p>

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_spec.js.snap

@@ -16,7 +16,7 @@ exports[`Environment matchs the snapshot 1`] = `
       class="row"
     >
       <div
-        class="col-1 align-self-center"
+        class="col-1 align-self-center px-3"
       >
         <user-avatar-link-stub
           imgalt=""
@@ -63,7 +63,7 @@ exports[`Environment matchs the snapshot 1`] = `
       </div>
        
       <div
-        class="col-sm-4 mt-0 pl-5 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
+        class="col-sm-3 mt-0 pl-6 pr-0 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
       >
         <time-ago-stub
           time="2019-02-20T16:15:40.122Z"

ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Project Header matches the snapshot 1`] = `
 <div
-  class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2"
+  class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
 >
   <div
     class="d-flex align-items-center"

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

@@ -76,14 +76,14 @@ describe('dashboard', () => {
 
     it('renders the message', () => {
       expect(trimText(message.text())).toBe(
-        'This dashboard displays a maximum of 7 projects and 3 environments per project. Read more.',
+        'This dashboard displays a maximum of 7 projects and 3 environments per project. More information',
       );
     });
 
     it('includes the correct documentation link in the message', () => {
       const helpLink = message.find(GlLink);
 
-      expect(helpLink.text()).toBe('Read more.');
+      expect(helpLink.text()).toBe('More information');
       expect(helpLink.attributes('href')).toBe(propsData.environmentsDashboardHelpPath);
       expect(helpLink.attributes('rel')).toBe('noopener noreferrer');
     });

locale/gitlab.pot

@@ -8468,7 +8468,7 @@ msgstr ""
 msgid "EnvironmentsDashboard|More actions"
 msgstr ""
 
-msgid "EnvironmentsDashboard|Read more."
+msgid "EnvironmentsDashboard|More information"
 msgstr ""
 
 msgid "EnvironmentsDashboard|Remove"