diff --git a/src/components/DownloadItem.tsx b/src/components/DownloadItem.tsx index 8831321..ca280fa 100644 --- a/src/components/DownloadItem.tsx +++ b/src/components/DownloadItem.tsx @@ -45,12 +45,15 @@ export const DownloadItem = React.memo(({ } if (statusTextRef.current) { statusTextRef.current.innerText = `${(progress.fraction * 100).toFixed(0)}%`; + statusTextRef.current.title = `${(progress.fraction * 100).toFixed(0)}%`; } if (speedTextRef.current) { speedTextRef.current.innerText = progress.speed; + speedTextRef.current.title = progress.speed; } if (etaTextRef.current) { etaTextRef.current.innerText = progress.eta; + etaTextRef.current.title = progress.eta; } }); @@ -78,14 +81,14 @@ export const DownloadItem = React.memo(({
- + {download.size && download.size !== '-' ? download.size : 'Unknown'}
{download.status === 'completed' ? ( - Completed + Completed ) : ( <>
@@ -101,10 +104,19 @@ export const DownloadItem = React.memo(({ />
(({
- + {download.status === 'downloading' ? download.speed : download.status === 'processing' ? 'Processing…' : '-'}
- + {download.status === 'downloading' ? download.eta : download.status === 'processing' ? 'Muxing…' : '-'}
- +
- + {download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'} diff --git a/src/index.css b/src/index.css index c50d17d..37fe7a4 100644 --- a/src/index.css +++ b/src/index.css @@ -1034,10 +1034,13 @@ display: flex; align-items: center; min-width: 0; + overflow: hidden; } .download-cell-truncate > span, .download-cell-right > span { + display: block; + max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; @@ -1087,12 +1090,16 @@ overflow: hidden; } - .download-status-cell > span { - min-width: 48px; - flex-shrink: 0; - font-size: 10px; - font-variant-numeric: tabular-nums; - } +.download-status-cell > span { + min-width: 0; + max-width: 100%; + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 10px; + font-variant-numeric: tabular-nums; +} .download-progress-track { width: 100%;