diff --git a/src/components/DownloadItem.tsx b/src/components/DownloadItem.tsx index 119afaf..8831321 100644 --- a/src/components/DownloadItem.tsx +++ b/src/components/DownloadItem.tsx @@ -72,12 +72,12 @@ export const DownloadItem = React.memo(({ {getCategoryIcon(download.category)} - + {download.fileName} -
+
{download.size && download.size !== '-' ? download.size : 'Unknown'} @@ -128,13 +128,13 @@ export const DownloadItem = React.memo(({ )}
-
+
{download.status === 'downloading' ? download.speed : download.status === 'processing' ? 'Processing…' : '-'}
- -
+ +
{download.status === 'downloading' ? download.eta : download.status === 'processing' ? 'Muxing…' : '-'} diff --git a/src/components/DownloadTable.tsx b/src/components/DownloadTable.tsx index 21de836..24b437d 100644 --- a/src/components/DownloadTable.tsx +++ b/src/components/DownloadTable.tsx @@ -19,8 +19,8 @@ export const DownloadTable: React.FC = ({ filter }) => { const [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: string } | null>(null); const [columnWidths, setColumnWidths] = useState([340, 100, 220, 100, 80, 170]); - const columnMinimums = [200, 80, 170, 80, 70, 120]; - const tableGridTemplate = columnWidths.map(width => `${width}px`).join(' '); + const columnMinimums = [0, 58, 92, 58, 48, 112]; + const tableGridTemplate = columnWidths.map((width, index) => `minmax(${columnMinimums[index]}px, ${width}fr)`).join(' '); const startColumnResize = (index: number, event: React.PointerEvent) => { event.preventDefault(); diff --git a/src/index.css b/src/index.css index f126356..c50d17d 100644 --- a/src/index.css +++ b/src/index.css @@ -931,26 +931,36 @@ font-weight: 600; } - .download-table-scroll { - flex: 1; - min-height: 0; - overflow-x: auto; - overflow-y: hidden; - } +.download-table-scroll { + flex: 1; + min-height: 0; + min-width: 0; + overflow-x: hidden; + overflow-y: hidden; +} - .download-table-header, - .download-row { - width: max-content; - min-width: 100%; - } +.download-table-header, +.download-row { + box-sizing: border-box; + width: 100%; + min-width: 0; +} - .download-table-header > div { - position: relative; - height: 100%; - display: flex; - align-items: center; - min-width: 0; - } +.download-table-header > div { + position: relative; + height: 100%; + display: flex; + align-items: center; + min-width: 0; + overflow: hidden; +} + +.download-table-header > div > span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .download-table-header > div:not(:first-child) { border-left: 1px solid hsl(var(--border-color)); @@ -976,16 +986,22 @@ overflow: hidden; } - .download-row { - height: 32px; - display: grid; - align-items: center; - padding: 0 16px; - margin: 2px 12px; - border-radius: 6px; - color: hsl(var(--text-primary)); - font-size: 12px; - } +.download-row { + height: 32px; + display: grid; + align-items: center; + width: auto; + padding: 0 16px; + margin: 2px 12px; + border-radius: 6px; + color: hsl(var(--text-primary)); + font-size: 12px; +} + +.download-row > div { + min-width: 0; + overflow: hidden; +} .download-row:nth-child(even) { background: hsl(var(--stripe-bg)); @@ -995,32 +1011,51 @@ background: hsl(var(--item-hover)); } - .download-file-cell { - display: flex; - align-items: center; - gap: 9px; - min-width: 0; - } +.download-file-cell { + display: flex; + align-items: center; + gap: 9px; + min-width: 0; + overflow: hidden; +} - .download-file-name { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: hsl(var(--text-primary)); - font-weight: 650; - } +.download-file-name { + display: block; + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: hsl(var(--text-primary)); + font-weight: 650; +} + +.download-cell-truncate { + display: flex; + align-items: center; + min-width: 0; +} + +.download-cell-truncate > span, +.download-cell-right > span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .download-cell-muted { color: hsl(var(--text-muted)); } - .download-cell-right { - text-align: right; - display: flex; - justify-content: flex-end; - align-items: center; - } +.download-cell-right { + text-align: right; + display: flex; + justify-content: flex-end; + align-items: center; + min-width: 0; + overflow: hidden; +} .download-empty-row { color: hsl(var(--text-muted)); @@ -1043,12 +1078,14 @@ background: hsl(var(--stripe-bg)); } - .download-status-cell { - display: flex; - align-items: center; - gap: 8px; - padding-right: 12px; - } +.download-status-cell { + display: flex; + align-items: center; + gap: 8px; + padding-right: 12px; + min-width: 0; + overflow: hidden; +} .download-status-cell > span { min-width: 48px; @@ -1057,12 +1094,12 @@ font-variant-numeric: tabular-nums; } - .download-progress-track { - width: 100%; - min-width: 58px; - height: 14px; - border-radius: 4px; - overflow: hidden; +.download-progress-track { + width: 100%; + min-width: 0; + height: 14px; + border-radius: 4px; + overflow: hidden; background: hsl(var(--border-color)); box-shadow: inset 0 1px 1px hsl(0 0% 0% / 0.22); }