Merge branch '259647-analytics-date-picker-labels-are-not-centre-aligned' into 'master'

Resolve "Analytics date picker labels are not centre aligned"

See merge request gitlab-org/gitlab!44990

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -206,7 +206,7 @@ export default {
         >
           <projects-dropdown-filter
             :key="currentGroup.id"
-            class="js-projects-dropdown-filter project-select"
+            class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
             :group-id="currentGroup.id"
             :group-namespace="currentGroupPath"
             :query-params="projectsQueryParams"

ee/app/assets/javascripts/analytics/merge_request_analytics/components/app.vue

@@ -48,7 +48,7 @@ export default {
     <div
       class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between gl-bg-gray-10 gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-py-3"
     >
-      <filter-bar class="gl-flex-grow-1 gl-lg-ml-3" />
+      <filter-bar class="gl-flex-grow-1 gl-lg-ml-3 gl-mb-2 gl-lg-mb-0" />
       <date-range
         :start-date="startDate"
         :end-date="endDate"

ee/app/assets/javascripts/analytics/shared/components/daterange.vue

@@ -90,8 +90,9 @@ export default {
       :default-max-date="maxDate"
       :same-day-selection="includeSelectedDate"
       theme="animate-picker"
-      start-picker-class="js-daterange-picker-from d-flex flex-column flex-lg-row align-items-lg-center mr-lg-2 mb-2 mb-md-0"
+      start-picker-class="js-daterange-picker-from gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-center gl-lg-mr-3 gl-mb-2 gl-lg-mb-0"
       end-picker-class="js-daterange-picker-to d-flex flex-column flex-lg-row align-items-lg-center"
+      label-class="gl-mb-2 gl-lg-mb-0"
     />
     <div
       v-if="maxDateRange"

ee/app/assets/stylesheets/page_bundles/cycle_analytics.scss

@@ -11,7 +11,6 @@
 
   label {
     @include media-breakpoint-up(lg) {
-      margin-bottom: 0;
       margin-right: $gl-padding-4;
     }
   }

ee/app/assets/stylesheets/pages/productivity_analytics.scss

@@ -58,7 +58,6 @@
 
     label {
       @include media-breakpoint-up(lg) {
-        margin-bottom: 0;
         margin-right: $gl-padding-4;
       }
     }

ee/changelogs/unreleased/259647-analytics-date-picker-labels-are-not-centre-aligned.yml

+---
+title: Align Analytics date picker labels
+merge_request: 44990
+author:
+type: fixed