From bf8b3ca836d468278b5ec41bf0a019ee09cb873f Mon Sep 17 00:00:00 2001
From: Chubby Granny Chaser <hydralauncher@proton.me>
Date: Sun, 30 Nov 2025 05:14:26 +0000
Subject: [PATCH] style: update download group layout and styling for improved
 responsiveness

---
 .../src/pages/downloads/download-group.scss   |  5 ++++-
 .../src/pages/downloads/download-group.tsx    | 20 +++++++++----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss
index e5fa6009..ee6f67ca 100644
--- a/src/renderer/src/pages/downloads/download-group.scss
+++ b/src/renderer/src/pages/downloads/download-group.scss
@@ -216,6 +216,7 @@
     font-size: 14px;
     font-weight: 700;
     color: #ffffff;
+    align-self: flex-end;
   }
 
   &__progress-size {
@@ -277,7 +278,9 @@
 
   &__stat-content {
     display: flex;
-    gap: 2px;
+    justify-content: space-between;
+    gap: calc(globals.$spacing-unit / 2);
+    width: 100%;
   }
 
   &__stat-label {
diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx
index 7d2ea0e7..f3fecbf5 100644
--- a/src/renderer/src/pages/downloads/download-group.tsx
+++ b/src/renderer/src/pages/downloads/download-group.tsx
@@ -4,9 +4,9 @@ import { Badge, Button } from "@renderer/components";
 import { formatDownloadProgress } from "@renderer/helpers";
 
 import { Downloader, formatBytes, formatBytesToMbps } from "@shared";
-import { formatDistance, addMilliseconds } from "date-fns";
+import { addMilliseconds } from "date-fns";
 import { DOWNLOADER_NAME } from "@renderer/constants";
-import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks";
+import { useAppSelector, useDownload, useLibrary, useDate } from "@renderer/hooks";
 
 import "./download-group.scss";
 import { useTranslation } from "react-i18next";
@@ -192,20 +192,15 @@ function HeroDownloadView({
         <div className="download-group__hero-progress">
           <div className="download-group__progress-row download-group__progress-row--bar">
             <div className="download-group__progress-wrapper">
-              <div className="download-group__progress-info-row">
-                <span className="download-group__progress-status">
-                  {getStatusText(game)}
-                </span>
-                <span className="download-group__progress-percentage">
-                  {formatDownloadProgress(currentProgress)}
-                </span>
-              </div>
               <div className="download-group__progress-info-row">
                 <span className="download-group__progress-size">
                   {isGameDownloading && lastPacket
                     ? `${formatBytes(lastPacket.download.bytesDownloaded)} / ${finalDownloadSize}`
                     : `0 B / ${finalDownloadSize}`}
                 </span>
+                <span></span>
+              </div>
+              <div className="download-group__progress-info-row">
                 <span className="download-group__progress-time">
                   {isGameDownloading &&
                   lastPacket?.timeRemaining &&
@@ -213,6 +208,9 @@ function HeroDownloadView({
                     ? calculateETA()
                     : ""}
                 </span>
+                <span className="download-group__progress-percentage">
+                  {formatDownloadProgress(currentProgress)}
+                </span>
               </div>
               <div className="download-group__progress-bar">
                 <div
@@ -350,6 +348,8 @@ export function DownloadGroup({
     resumeSeeding,
   } = useDownload();
 
+  const { formatDistance } = useDate();
+
   const peakSpeedsRef = useRef<Record<string, number>>({});
   const speedHistoryRef = useRef<Record<string, number[]>>({});
   const [dominantColors, setDominantColors] = useState<Record<string, string>>(