Update template, cleanup methods

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

 <script>
   import { monthInWords } from '~/lib/utils/datetime_utility';
 
-  import { EPIC_DETAILS_CELL_WIDTH, TIMELINE_CELL_MIN_WIDTH } from '../constants';
-
   import timelineHeaderSubItem from './timeline_header_sub_item.vue';
 
   export default {
@@ -22,7 +20,7 @@
         type: Array,
         required: true,
       },
-      shellWidth: {
+      itemWidth: {
         type: Number,
         required: true,
       },
@@ -36,22 +34,10 @@
       };
     },
     computed: {
-      thStyles() {
-        const timeframeLength = this.timeframe.length;
-
-        // Calculate minimum width for single cell
-        // based on total number of months in current timeframe
-        // and available shellWidth
-        const minWidth =
-          Math.ceil((this.shellWidth - EPIC_DETAILS_CELL_WIDTH) / timeframeLength);
-
-        // When shellWidth is too low, we need to obey global
-        // minimum cell width.
-        if (minWidth < TIMELINE_CELL_MIN_WIDTH) {
-          return `min-width: ${TIMELINE_CELL_MIN_WIDTH}px;`;
-        }
-
-        return `min-width: ${minWidth}px;`;
+      itemStyles() {
+        return {
+          width: `${this.itemWidth}px`,
+        };
       },
       timelineHeaderLabel() {
         const year = this.timeframeItem.getFullYear();
@@ -97,9 +83,9 @@
 </script>
 
 <template>
-  <th
+  <span
     class="timeline-header-item"
-    :style="thStyles"
+    :style="itemStyles"
   >
     <div
       class="item-label"
@@ -111,5 +97,5 @@
       :timeframe-item="timeframeItem"
       :current-date="currentDate"
     />
-  </th>
+  </span>
 </template>

spec/javascripts/roadmap/components/timeline_header_item_spec.js

 import Vue from 'vue';
 
 import timelineHeaderItemComponent from 'ee/roadmap/components/timeline_header_item.vue';
-import { TIMELINE_CELL_MIN_WIDTH } from 'ee/roadmap/constants';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframe, mockShellWidth } from '../mock_data';
+import { mockTimeframe, mockShellWidth, mockItemWidth } from '../mock_data';
 
 const mockTimeframeIndex = 0;
 
@@ -13,6 +12,7 @@ const createComponent = ({
   timeframeItem = mockTimeframe[mockTimeframeIndex],
   timeframe = mockTimeframe,
   shellWidth = mockShellWidth,
+  itemWidth = mockItemWidth,
 }) => {
   const Component = Vue.extend(timelineHeaderItemComponent);
 
@@ -21,6 +21,7 @@ const createComponent = ({
     timeframeItem,
     timeframe,
     shellWidth,
+    itemWidth,
   });
 };
 
@@ -42,15 +43,10 @@ describe('TimelineHeaderItemComponent', () => {
   });
 
   describe('computed', () => {
-    describe('thStyles', () => {
-      it('returns style string for th element based on shellWidth, timeframe length and Epic details cell width', () => {
+    describe('itemStyles', () => {
+      it('returns style object for container element based on value of `itemWidth` prop', () => {
         vm = createComponent({});
-        expect(vm.thStyles).toBe('min-width: 280px;');
-      });
-
-      it('returns style string for th element with minimum permissible width when calculated width is lower defined minimum width', () => {
-        vm = createComponent({ shellWidth: 1000 });
-        expect(vm.thStyles).toBe(`min-width: ${TIMELINE_CELL_MIN_WIDTH}px;`);
+        expect(vm.itemStyles.width).toBe('180px');
       });
     });