[UI] Improve download speed chart (#3244)

* update the amount of data points that avgdownloadspeed uses to represent the graph in downloads to be a higher number, changed the numbers to not jump around so much on the same row

* style change to be compliant

src/frontend/screens/DownloadManager/components/ProgressHeader/index.css

@@ -54,6 +54,8 @@
 .realtimeDownloadStat {
   white-space: nowrap;
   margin: 0px;
+  width: 6em;
+  text-align: start;
 }
 
 .realtimeDownloadStatLabel {
@@ -66,7 +68,6 @@
 .realtimeDownloadStatContainer {
   align-self: center;
   margin: 1em;
-  box-sizing: border-box;
 }
 
 .downloadRateChart {

src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx

@@ -20,19 +20,22 @@ export default function ProgressHeader(props: {
   appName: string
   state: DownloadManagerState
 }) {
+  const sampleSize = 100
   const { t } = useTranslation()
   const [progress] = hasProgress(props.appName)
   const [avgSpeed, setAvgDownloadSpeed] = useState<Point[]>(
-    Array<Point>(20).fill({ download: 0, disk: 0 })
+    Array<Point>(sampleSize).fill({ download: 0, disk: 0 })
   )
 
   useEffect(() => {
     if (props.state === 'idle') {
-      setAvgDownloadSpeed(Array<Point>(20).fill({ download: 0, disk: 0 }))
+      setAvgDownloadSpeed(
+        Array<Point>(sampleSize).fill({ download: 0, disk: 0 })
+      )
       return
     }
 
-    if (avgSpeed.length > 19) {
+    if (avgSpeed.length > sampleSize - 1) {
       avgSpeed.shift()
     }