mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-05 17:08:26 +00:00
fix(ui): prevent download table column overflow
This commit is contained in:
@@ -72,12 +72,12 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
|
||||
<span className="shrink-0 text-text-muted">
|
||||
{getCategoryIcon(download.category)}
|
||||
</span>
|
||||
<span className="download-file-name">
|
||||
<span className="download-file-name" title={download.fileName}>
|
||||
{download.fileName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="download-cell-truncate">
|
||||
<span className="tabular-nums">
|
||||
{download.size && download.size !== '-' ? download.size : 'Unknown'}
|
||||
</span>
|
||||
@@ -128,13 +128,13 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="download-cell-truncate">
|
||||
<span ref={speedTextRef} className="tabular-nums">
|
||||
{download.status === 'downloading' ? download.speed : download.status === 'processing' ? 'Processing…' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div className="download-cell-truncate">
|
||||
<span ref={etaTextRef} className="tabular-nums">
|
||||
{download.status === 'downloading' ? download.eta : download.status === 'processing' ? 'Muxing…' : '-'}
|
||||
</span>
|
||||
|
||||
@@ -19,8 +19,8 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ 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<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user