Fix broken specs

Fixes broken specs and updates the CE
project level cycle anaytics column widths
to match EE

app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue

@@ -45,10 +45,13 @@ export default {
       :class="{ active: isActive }"
       class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded border-color-default border-style-solid border-width-1px"
     >
-      <div class="stage-nav-item-cell stage-name p-0" :class="{ 'font-weight-bold': isActive }">
+      <div
+        class="stage-nav-item-cell stage-name w-50 pr-2"
+        :class="{ 'font-weight-bold': isActive }"
+      >
         {{ title }}
       </div>
-      <div class="stage-nav-item-cell stage-median mr-4">
+      <div class="stage-nav-item-cell stage-median w-50">
         <template v-if="isUserAllowed">
           <span v-if="hasValue">{{ value }}</span>
           <span v-else class="stage-empty">{{ __('Not enough data') }}</span>

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -51,11 +51,11 @@
     }
 
     .stage-header {
-      width: 18%;
+      width: 20.5%;
     }
 
     .median-header {
-      width: 22%;
+      width: 19.5%;
     }
 
     .event-header {

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

@@ -99,14 +99,14 @@ export default {
     >
       <div
         ref="title"
-        class="stage-nav-item-cell text-truncate w-50 pr-2"
+        class="stage-nav-item-cell stage-name text-truncate w-50 pr-2"
         :class="{ 'font-weight-bold': isActive }"
       >
         <span v-if="isTitleOverflowing" v-gl-tooltip.hover :title="title">{{ title }}</span>
         <span v-else>{{ title }}</span>
       </div>
       <div class="stage-nav-item-cell w-50 d-flex justify-content-between">
-        <div ref="median" class="w-75 align-items-start">
+        <div ref="median" class="stage-median w-75 align-items-start">
           <span v-if="hasValue">{{ median }}</span>
           <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
         </div>

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

@@ -118,7 +118,7 @@ export default {
           description: __(
             'The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.',
           ),
-          classes: 'median-header pl-4',
+          classes: 'median-header',
         },
         {
           title: this.stageName,

ee/spec/frontend/analytics/cycle_analytics/components/stage_nav_item_spec.js

@@ -18,8 +18,8 @@ describe('StageNavItem', () => {
   }
 
   let wrapper = null;
-  const findStageTitle = () => wrapper.find({ref: 'title'});
-  const findStageMedian = () => wrapper.find({ref: 'median'});
+  const findStageTitle = () => wrapper.find({ ref: 'title' });
+  const findStageMedian = () => wrapper.find({ ref: 'median' });
 
   afterEach(() => {
     wrapper.destroy();