Rudder

The width of the progressbar segments is calculated incorrectly.

If a segment gets a fixed width (I guess to prevent it from becoming too small), then the rest of the calculations are no longer correct.

Example:

A progress bar with three segments:
- green (Compliant 83.43% + not applicable 12.39%)
- orange (non compliant 1,5%)
- gray (no report 2,69%)

The generated CSS:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:calc( (100% - 8px) * 0.96)" title="Compliant: 83.43% <br> Not applicable (audit): 12.39% <br> "><span>96%</span></div>
  <div class="progress-bar progress-bar-audit-noncompliant" style="width:8px" title="Non compliance: 1.50%"><span></span></div>
  <div class="progress-bar progress-bar-no-report" style=" width:calc( (100% - 8px) * 0.03)" title="No report: 2.69%"><span></span></div>
</div>

If one segment is treated specially and is no longer taken into account in the percentage calculation, then the remaining segments must again add up to 100%.

The whole progress bar div has a width of 711px

711px - 8px - ((711px - 8px) * (0.96 + 0.03)) = 7.03

So in this example, 7px are shown as a white empty "segment" at the end of the progress bar.