Update startOffset calculation for epics with out-of-range endDate

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

@@ -104,9 +104,18 @@
           // Set offset to 0.
           offset = 'left: 0;';
         } else {
-          // Calculate proportional offset based on startDate and total days in
-          // current month.
-          offset = `left: ${Math.floor((startDate / daysInMonth) * 100)}%;`;
+          // If Epic end date is out of range
+          const lastTimeframeItem = this.timeframe[this.timeframe.length - 1];
+          // Check if Epic start date falls within last month of the timeframe
+          if (this.epic.startDate.getMonth() === lastTimeframeItem.getMonth() &&
+              this.epic.startDate.getFullYear() === lastTimeframeItem.getFullYear()) {
+            // Compensate for triangle size
+            offset = `right: ${TIMELINE_END_OFFSET_HALF}px;`;
+          } else {
+            // Calculate proportional offset based on startDate and total days in
+            // current month.
+            offset = `left: ${(startDate / daysInMonth) * 100}%;`;
+          }
         }
 
         return offset;

spec/javascripts/roadmap/components/epic_item_timeline_spec.js

@@ -108,6 +108,16 @@ describe('EpicItemTimelineComponent', () => {
         expect(vm.getTimelineBarStartOffset()).toBe('left: 0;');
       });
 
+      it('returns `right: 8px;` when Epic startDate is in last timeframe month and endDate is out of range', () => {
+        vm = createComponent({
+          epic: Object.assign({}, mockEpic, {
+            startDate: mockTimeframe[mockTimeframe.length - 1],
+            endDateOutOfRange: true,
+          }),
+        });
+        expect(vm.getTimelineBarStartOffset()).toBe('right: 8px;');
+      });
+
       it('returns proportional `left` value based on Epic startDate and days in the month', () => {
         vm = createComponent({
           epic: Object.assign({}, mockEpic, {