style(ui): center align download list columns for better spacing

This commit is contained in:
NimBold
2026-06-28 23:47:44 +03:30
parent 64b98282d8
commit 19b4ab8a84
3 changed files with 7 additions and 5 deletions
+1 -1
View File
@@ -187,7 +187,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
<div className="download-cell-right"> <div className="download-cell-right">
<span <span
className="truncate group-hover:hidden tabular-nums ml-auto" className="truncate group-hover:hidden tabular-nums"
title={download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'} title={download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
> >
{download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'} {download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
+1 -1
View File
@@ -454,7 +454,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
className={`${index === 5 ? 'download-cell-right' : ''} ${filter.startsWith('queue:') ? 'opacity-70 cursor-default' : 'cursor-pointer hover:text-text-primary transition-colors'} flex items-center justify-between`} className={`${index === 5 ? 'download-cell-right' : ''} ${filter.startsWith('queue:') ? 'opacity-70 cursor-default' : 'cursor-pointer hover:text-text-primary transition-colors'} flex items-center justify-between`}
onClick={() => handleSort(label)} onClick={() => handleSort(label)}
> >
<div className="flex items-center gap-1 w-full h-full select-none"> <div className={`flex items-center gap-1 w-full h-full select-none ${index > 0 ? 'justify-center' : ''}`}>
<span>{label}</span> <span>{label}</span>
{sortConfig?.column === label && ( {sortConfig?.column === label && (
sortConfig.direction === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} /> sortConfig.direction === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} />
+5 -3
View File
@@ -1562,6 +1562,7 @@ html[data-list-density="relaxed"] .download-ghost-row {
.download-cell-truncate { .download-cell-truncate {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
} }
@@ -1581,9 +1582,9 @@ html[data-list-density="relaxed"] .download-ghost-row {
} }
.download-cell-right { .download-cell-right {
text-align: right; text-align: center;
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
@@ -1613,6 +1614,7 @@ html[data-list-density="relaxed"] .download-ghost-row {
.download-status-cell { .download-status-cell {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
gap: 8px; gap: 8px;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
@@ -1621,7 +1623,7 @@ html[data-list-density="relaxed"] .download-ghost-row {
.download-status-cell > span { .download-status-cell > span {
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
flex: 0 0 72px; flex: 0 0 auto;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;