Align job progress bars and job result labels

This aligns the layout of the job progress bar and job result lables
which are shown in the job list (expandable section of a QueueItem).

The idea is to keep the styling similar while one should be able to
clearly distinguish between a running job (progress) and a completed job
(result).

Change-Id: I57c4cc1bb1156288fd7e2d14b458e3abec009a40

web/src/containers/status/Misc.jsx

@@ -18,6 +18,7 @@ import { Link } from 'react-router-dom'
 import {
   Label,
   Progress,
+  ProgressMeasureLocation,
   ProgressVariant,
   Tooltip,
 } from '@patternfly/react-core'
@@ -351,10 +352,10 @@ function JobProgressBar({ job, elapsedTime, remainingTime }) {
   return (
     <Progress
       aria-label={`${job.name}-progress`}
-      className={progressPercent === 0 ? 'zuul-animated-progress' : 'zuul-progress'}
+      className={progressPercent === 0 ? 'zuul-progress-animated' : 'zuul-progress'}
       variant={job.pre_fail ? ProgressVariant.danger : ''}
       value={progressPercent}
-      // measureLocation={ProgressMeasureLocation.inside}
+      measureLocation={ProgressMeasureLocation.inside}
       label={remainingTimeStr}
       valueText={remainingTimeStr}
     />

web/src/index.css

@@ -308,11 +308,28 @@ a.refresh {
     border-radius: 3px;
 }
 
+/* Remove grid gap for job progress bars to align them with the
+   width of the result labels. */
+.pf-c-progress.zuul-progress,
+.pf-c-progress.zuul-progress-animated {
+    --pf-c-progress--GridGap: 0;
+}
+
+/* Make job progress bars the same width as the job result labels */
 .zuul-progress div.pf-c-progress__bar {
     width: 100px;
 }
 
-.zuul-animated-progress div.pf-c-progress__bar {
+.zuul-progress .pf-c-progress__indicator,
+.zuul-progress-animated .pf-c-progress__indicator {
+    border-radius: 3px;
+}
+
+.zuul-progress-animated div.pf-c-progress__bar::before {
+    border-radius: 3px;
+}
+
+.zuul-progress-animated div.pf-c-progress__bar {
     width: 100px;
     background-image: linear-gradient(
         -45deg,