Changed the progress-block class to use a calculated width of 8.5rem (#…

…17)

Original PR link: nzbget/nzbget#724
Author: @acidDrain

Changed

progress-block class in webui/styles.css

What Changed

Set the width property to a calculate 8.5rem instead of fixed 120px.

/******************

    webui/style.css *
    *****************/
    1117 / BEGIN: Progress bars */
    1118 .progress-block {
    1119 position: relative;

    1120 width: 120px;

    1120 width: calc(8.5rem);
    1121 }
    1122
    1123 .progress {
    1124 margin-bottom: 0px;
    1125 background: #f0f0f0;

Why

Progressbar text in the Downloads view becomes unreadable; text is crammed and overlapping for large files (e.g. 18.42GB)
Validation

I tested using:

Mozilla Firefox 83 (x86_64) - default font settings: 16px

lsb_release -a output

$ lsb_release -a
Distributor ID: Debian
Description: Debian GNU/Linux 10 (buster)
Release: 10
Codename: buster

uname output

$ uname -a | awk '{ for (i=1; i<= NF; i++) if ($i != $2) printf("%s ", $i); print "\n"}'
Linux 5.8.0-0.bpo.2-amd64 #1 SMP Debian 5.8.10-1~bpo10+1 (2020-09-26) x86_64 GNU/Linux

native resolution 3440x1440
Web Developer Tools to simulate mobile (iPhone 8) device in portrait and landscape mode
xrandr --query output

$ xrandr --query
DP-1 connected primary 3440x1440+0+0 (normal left inverted right x axis y axis) 800mm x 335mm

xrdb -query output

$ xrdb -query
Xft.antialias: true
Xft.

autohint: true
Xft.dpi: 120
Xft.hinting: true
Xft.hintstyle: hintslight
Xft.lcdfilter: lcddefault
Xft.rgba: rgba

I did not observe any adverse effects on the surrounding elements or the overall layout.

webui/style.css

@@ -1117,7 +1117,7 @@ table.table-hidecheck tbody > tr > td:first-child {
 /* BEGIN: Progress bars */
 .progress-block {
 	position: relative;
-	width: 120px;
+	width: calc(8.5rem);
 }
 
 .progress {