gsadmin/Firelink
1
0
Fork 0
mirror of https://github.com/nimbold/Firelink.git synced 2026-08-29 12:07:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): align size values within column

Browse Source
This commit is contained in:
NimBold
2026-07-17 23:37:32 +03:30
parent 61eb034db1
commit 9fdd8ac1b8
2 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DownloadItem.tsx
+12 -10
View File
@@ -94,17 +94,19 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
? `${sizeDisplay.downloaded} downloaded of ${sizeDisplay.totalIsEstimate ? 'approximately ' : ''}${sizeDisplay.total} ${sizeDisplay.unit}` ? `${sizeDisplay.downloaded} downloaded of ${sizeDisplay.totalIsEstimate ? 'approximately ' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
: completedSizeLabel} : completedSizeLabel}
> >
{hasDownloadedAmount ? ( <div className="download-size-content">
<span className="download-size-progress"> {hasDownloadedAmount ? (
<span className={downloadProgressColorClass(download.status)}>{sizeDisplay.downloaded}</span> <span className="download-size-progress">
<span className="text-text-muted"> / </span> <span className={downloadProgressColorClass(download.status)}>{sizeDisplay.downloaded}</span>
<span className="text-text-muted"> / </span>
</span>
) : null}
<span className="download-size-total">
{hasDownloadedAmount
? `${sizeDisplay.totalIsEstimate ? '~' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
: completedSizeLabel}
</span> </span>
) : null} </div>
<span className="download-size-total">
{hasDownloadedAmount
? `${sizeDisplay.totalIsEstimate ? '~' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
: completedSizeLabel}
</span>
</div> </div>
<div className="download-status-cell"> <div className="download-status-cell">
src/index.css
+21 -17
View File
@@ -1973,22 +1973,30 @@ html[data-list-density="relaxed"] .download-ghost-row {
.download-size-cell { .download-size-cell {
justify-content: flex-end; justify-content: flex-end;
text-align: right;
}
.download-size-cell > .download-size-progress {
flex: 1 1 auto;
text-align: right;
}
.download-size-cell > .download-size-total {
flex: 0 0 auto;
text-align: left; text-align: left;
white-space: nowrap;
} }
.download-size-cell > .download-size-progress, .download-size-content {
.download-size-cell > .download-size-total { display: flex;
align-items: center;
width: min(100%, 12rem);
min-width: 0;
overflow: hidden;
text-align: left;
}
.download-size-content > .download-size-progress {
flex: 0 1 auto;
text-align: left;
}
.download-size-content > .download-size-total {
flex: 0 1 auto;
text-align: left;
}
.download-size-content > .download-size-progress,
.download-size-content > .download-size-total {
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
@@ -1996,10 +2004,6 @@ html[data-list-density="relaxed"] .download-ghost-row {
white-space: nowrap; white-space: nowrap;
} }
.download-size-cell > .download-size-progress {
text-align: right;
}
.download-row > .download-size-cell { .download-row > .download-size-cell {
padding-right: calc(var(--download-column-padding-x) + 6px); padding-right: calc(var(--download-column-padding-x) + 6px);
} }