fix(ui): prevent download table column overflow

src/components/DownloadItem.tsx

@@ -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>

src/components/DownloadTable.tsx

@@ -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 columnMinimums = [0, 58, 92, 58, 48, 112];
-  const tableGridTemplate = columnWidths.map(width => `${width}px`).join(' ');
+  const tableGridTemplate = columnWidths.map((width, index) => `minmax(${columnMinimums[index]}px, ${width}fr)`).join(' ');
 
   const startColumnResize = (index: number, event: React.PointerEvent<HTMLDivElement>) => {
     event.preventDefault();

src/index.css

@@ -931,26 +931,36 @@
     font-weight: 600;
   }
 
-  .download-table-scroll {
+.download-table-scroll {
-    flex: 1;
+  flex: 1;
-    min-height: 0;
+  min-height: 0;
-    overflow-x: auto;
+  min-width: 0;
-    overflow-y: hidden;
+  overflow-x: hidden;
-  }
+  overflow-y: hidden;
+}
 
-  .download-table-header,
+.download-table-header,
-  .download-row {
+.download-row {
-    width: max-content;
+  box-sizing: border-box;
-    min-width: 100%;
+  width: 100%;
-  }
+  min-width: 0;
+}
 
-  .download-table-header > div {
+.download-table-header > div {
-    position: relative;
+  position: relative;
-    height: 100%;
+  height: 100%;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    min-width: 0;
+  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 {
+.download-row {
-    height: 32px;
+  height: 32px;
-    display: grid;
+  display: grid;
-    align-items: center;
+  align-items: center;
-    padding: 0 16px;
+  width: auto;
-    margin: 2px 12px;
+  padding: 0 16px;
-    border-radius: 6px;
+  margin: 2px 12px;
-    color: hsl(var(--text-primary));
+  border-radius: 6px;
-    font-size: 12px;
+  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 {
+.download-file-cell {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    gap: 9px;
+  gap: 9px;
-    min-width: 0;
+  min-width: 0;
-  }
+  overflow: hidden;
+}
 
-  .download-file-name {
+.download-file-name {
-    min-width: 0;
+  display: block;
-    overflow: hidden;
+  flex: 1 1 auto;
-    text-overflow: ellipsis;
+  min-width: 0;
-    white-space: nowrap;
+  overflow: hidden;
-    color: hsl(var(--text-primary));
+  text-overflow: ellipsis;
-    font-weight: 650;
+  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 {
+.download-cell-right {
-    text-align: right;
+  text-align: right;
-    display: flex;
+  display: flex;
-    justify-content: flex-end;
+  justify-content: flex-end;
-    align-items: center;
+  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 {
+.download-status-cell {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    gap: 8px;
+  gap: 8px;
-    padding-right: 12px;
+  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 {
+.download-progress-track {
-    width: 100%;
+  width: 100%;
-    min-width: 58px;
+  min-width: 0;
-    height: 14px;
+  height: 14px;
-    border-radius: 4px;
+  border-radius: 4px;
-    overflow: hidden;
+  overflow: hidden;
     background: hsl(var(--border-color));
     box-shadow: inset 0 1px 1px hsl(0 0% 0% / 0.22);
   }