1 files changed, 13 insertions, 6 deletions
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index bc263bc36e4..06aca547183 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -2,6 +2,7 @@
 import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import { GlProgressBar } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
 
 export default {
   name: 'TimeTrackingComparisonPane',
@@ -43,8 +44,14 @@ export default {
       return stringifyTime(this.parsedTimeRemaining);
     },
     timeRemainingTooltip() {
-      const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
-      return `${prefix} ${this.timeRemainingHumanReadable}`;
+      const { timeRemainingHumanReadable, timeRemainingMinutes } = this;
+      return timeRemainingMinutes < 0
+        ? sprintf(s__('TimeTracking|Over by %{timeRemainingHumanReadable}'), {
+            timeRemainingHumanReadable,
+          })
+        : sprintf(s__('TimeTracking|Time remaining: %{timeRemainingHumanReadable}'), {
+            timeRemainingHumanReadable,
+          });
     },
     /* Diff values for comparison meter */
     timeRemainingMinutes() {
@@ -74,12 +81,12 @@ export default {
       <gl-progress-bar :value="timeRemainingPercent" :variant="progressBarVariant" />
       <div class="compare-display-container">
         <div class="compare-display float-left">
-          <span class="compare-label"> {{ s__('TimeTracking|Spent') }} </span>
-          <span class="compare-value spent"> {{ timeSpentHumanReadable }} </span>
+          <span class="compare-label">{{ s__('TimeTracking|Spent') }}</span>
+          <span class="compare-value spent">{{ timeSpentHumanReadable }}</span>
         </div>
         <div class="compare-display estimated float-right">
-          <span class="compare-label"> {{ s__('TimeTrackingEstimated|Est') }} </span>
-          <span class="compare-value"> {{ timeEstimateHumanReadable }} </span>
+          <span class="compare-label">{{ s__('TimeTrackingEstimated|Est') }}</span>
+          <span class="compare-value">{{ timeEstimateHumanReadable }}</span>
         </div>
       </div>
     </div>