Merge branch '224637-milestones-list-has-an-incorrect-height-value-with-1-milestone' into 'master'

Change timeline height to a uniform value

See merge request gitlab-org/gitlab!35394

ee/app/assets/javascripts/roadmap/components/milestone_timeline.vue

@@ -38,7 +38,6 @@ export default {
       v-for="timeframeItem in timeframe"
       :key="timeframeItem.id"
       class="milestone-timeline-cell gl-display-table-cell gl-relative border-right border-bottom"
-      :class="{ 'milestone-timeline-cell-empty': !milestonesExpanded }"
       data-qa-selector="milestone_timeline_cell"
     >
       <current-day-indicator :preset-type="presetType" :timeframe-item="timeframeItem" />

ee/app/assets/javascripts/roadmap/components/milestones_list_section.vue

@@ -115,13 +115,9 @@ export default {
 </script>
 
 <template>
-  <div
-    :style="sectionContainerStyles"
-    class="milestones-list-section gl-display-table"
-    :class="{ 'milestones-list-section-collapsed': !milestonesExpanded }"
-  >
+  <div :style="sectionContainerStyles" class="milestones-list-section gl-display-table">
     <div
-      class="milestones-list-title gl-display-table-cell border-bottom gl-vertical-align-top position-sticky gl-p-3"
+      class="milestones-list-title gl-display-table-cell border-bottom gl-vertical-align-top position-sticky gl-px-3 gl-pt-2"
     >
       <div class="gl-display-flex gl-align-items-center">
         <span

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

 $header-item-height: 60px;
 $item-height: 50px;
-$milestones-collapsed-height: 38px;
 $details-cell-width: 320px;
+$timeline-cell-height: 32px;
 $timeline-cell-width: 180px;
 $border-style: 1px solid $border-gray-normal;
 $roadmap-gradient-dark-gray: rgba(0, 0, 0, 0.15);
@@ -409,21 +409,14 @@ html.group-epics-roadmap-html {
 }
 
 .milestones-list-section {
-  &.milestones-list-section-collapsed {
-    height: $milestones-collapsed-height;
-  }
-
   .milestones-list-items {
     .milestone-timeline-cell {
+      height: $timeline-cell-height;
       width: $timeline-cell-width;
     }
 
-    .milestone-timeline-cell-empty {
-      height: $milestones-collapsed-height;
-    }
-
     .timeline-bar-wrapper {
-      height: 32px;
+      height: $timeline-cell-height;
       color: $gray-700;
     }
 

ee/spec/frontend/roadmap/components/milestone_timeline_spec.js

@@ -30,24 +30,17 @@ describe('MilestoneTimelineComponent', () => {
     });
   };
 
-  const findMilestoneTimelineCell = () => wrapper.find('.milestone-timeline-cell');
   const findMilestoneItem = () => wrapper.find(MilestoneItem);
 
   describe.each`
-    props                            | hasCellEmpty | hasMilestoneItem
-    ${{}}                            | ${false}     | ${true}
-    ${{ milestonesExpanded: false }} | ${true}      | ${false}
-  `('with $props', ({ props, hasCellEmpty, hasMilestoneItem }) => {
+    props                            | hasMilestoneItem
+    ${{}}                            | ${true}
+    ${{ milestonesExpanded: false }} | ${false}
+  `('with $props', ({ props, hasMilestoneItem }) => {
     beforeEach(() => {
       createWrapper(props);
     });
 
-    it(`renders timeline cell with empty class = ${hasCellEmpty}`, () => {
-      expect(findMilestoneTimelineCell().classes('milestone-timeline-cell-empty')).toBe(
-        hasCellEmpty,
-      );
-    });
-
     it(`renders MilestoneItem component = ${hasMilestoneItem}`, () => {
       expect(findMilestoneItem().exists()).toBe(hasMilestoneItem);
     });