fix(ui): align size values within column

src/components/DownloadItem.tsx

@@ -94,17 +94,19 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
           ? `${sizeDisplay.downloaded} downloaded of ${sizeDisplay.totalIsEstimate ? 'approximately ' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
           : completedSizeLabel}
       >
-        {hasDownloadedAmount ? (
-          <span className="download-size-progress">
-            <span className={downloadProgressColorClass(download.status)}>{sizeDisplay.downloaded}</span>
-            <span className="text-text-muted"> / </span>
+        <div className="download-size-content">
+          {hasDownloadedAmount ? (
+            <span className="download-size-progress">
+              <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>
-        ) : null}
-        <span className="download-size-total">
-          {hasDownloadedAmount
-            ? `${sizeDisplay.totalIsEstimate ? '~' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
-            : completedSizeLabel}
-        </span>
+        </div>
       </div>
       
       <div className="download-status-cell">

src/index.css

@@ -1973,22 +1973,30 @@ html[data-list-density="relaxed"] .download-ghost-row {
 
 .download-size-cell {
   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;
-  white-space: nowrap;
 }
 
-.download-size-cell > .download-size-progress,
-.download-size-cell > .download-size-total {
+.download-size-content {
+  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%;
   min-width: 0;
   overflow: hidden;
@@ -1996,10 +2004,6 @@ html[data-list-density="relaxed"] .download-ghost-row {
   white-space: nowrap;
 }
 
-.download-size-cell > .download-size-progress {
-  text-align: right;
-}
-
 .download-row > .download-size-cell {
   padding-right: calc(var(--download-column-padding-x) + 6px);
 }