fix: stabilize media progress and cancel controls

src/components/DeleteConfirmationModal.tsx

@@ -90,7 +90,7 @@ export const DeleteConfirmationModal: React.FC = () => {
           <button
             onClick={handleCancel}
             disabled={isRemoving}
-            className="px-4 py-2 rounded-lg text-sm font-medium transition-colors text-text-secondary hover:bg-item-hover hover:text-text-primary disabled:opacity-50"
+            className="app-button app-button-cancel px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
           >
             Cancel
           </button>

src/components/DownloadItem.tsx

@@ -85,25 +85,25 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
         </span>
       </div>
       
-      <div className="download-cell-truncate">
-        <span
-          className="tabular-nums"
-          title={hasDownloadedAmount
-            ? `${sizeDisplay.downloaded} downloaded of ${sizeDisplay.totalIsEstimate ? '~' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
+      <div
+        className="download-cell-truncate download-size-cell tabular-nums"
+        title={hasDownloadedAmount
+          ? `${sizeDisplay.downloaded} downloaded of ${sizeDisplay.totalIsEstimate ? '~' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
+          : completedSizeLabel}
+        aria-label={hasDownloadedAmount
+          ? `${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>
+          </span>
+        ) : null}
+        <span className="download-size-total">
+          {hasDownloadedAmount
+            ? `${sizeDisplay.totalIsEstimate ? '~' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
             : completedSizeLabel}
-          aria-label={hasDownloadedAmount
-            ? `${sizeDisplay.downloaded} downloaded of ${sizeDisplay.totalIsEstimate ? 'approximately ' : ''}${sizeDisplay.total} ${sizeDisplay.unit}`
-            : completedSizeLabel}
-        >
-          {hasDownloadedAmount ? (
-            <>
-              <span className={downloadProgressColorClass(download.status)}>{sizeDisplay.downloaded}</span>
-              <span className="text-text-muted"> / </span>
-              <span>
-                {sizeDisplay.totalIsEstimate ? '~' : ''}{sizeDisplay.total} {sizeDisplay.unit}
-              </span>
-            </>
-          ) : completedSizeLabel}
         </span>
       </div>
       

src/components/DownloadTable.tsx

@@ -538,7 +538,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
                 className={`${index === 5 ? 'download-cell-right' : ''} cursor-pointer hover:text-text-primary transition-colors flex items-center justify-between`}
                 onClick={() => handleSort(label as DownloadSortColumn)}
               >
-                <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 === 1 ? 'justify-end' : ''}`}>
                   <span>{label}</span>
                   {(isQueueFilter ? queueSortConfig : sortConfig)?.column === label && (
                     (isQueueFilter ? queueSortConfig : sortConfig)?.direction === 'asc'

src/components/DuplicateResolutionModal.tsx

@@ -68,7 +68,7 @@ export const DuplicateResolutionModal = ({ conflicts: initialConflicts, onConfir
         </div>
 
         <div className="p-4 border-t border-border-modal flex items-center justify-between bg-sidebar-bg/50">
-          <button onClick={onCancel} className="app-button border-transparent bg-transparent px-4 text-xs text-text-secondary">
+          <button onClick={onCancel} className="app-button app-button-cancel px-4 text-xs">
             Cancel
           </button>
           <button 

src/components/PropertiesModal.tsx

@@ -454,7 +454,7 @@ export const PropertiesModal = () => {
           <div className="flex gap-2">
             <button 
               onClick={() => setSelectedPropertiesDownloadId(null)} 
-              className="app-button border-transparent bg-transparent px-4 text-xs text-text-secondary"
+              className="app-button app-button-cancel px-4 text-xs"
             >
               Cancel
             </button>