From 10ac6c9d9ce592e8d3c3d4e04d7b76f866c679b2 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 20 Jan 2026 19:03:35 +0200
Subject: [PATCH] style: update repacks modal styles for improved layout and
 positioning

---
 .../game-details/modals/repacks-modal.scss    | 19 ++++++++++---------
 .../game-details/modals/repacks-modal.tsx     | 17 ++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.scss b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
index 77b5d6cf..53ba7c4c 100644
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
@@ -40,15 +40,18 @@
     gap: calc(globals.$spacing-unit * 1);
     color: globals.$body-color;
     padding: calc(globals.$spacing-unit * 2);
+    padding-right: calc(globals.$spacing-unit * 4);
+    position: relative;
   }
 
   &__availability-orb {
-    display: inline-block;
+    position: absolute;
+    top: calc(globals.$spacing-unit * 1.5);
+    right: calc(globals.$spacing-unit * 1.5);
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    margin-left: calc(globals.$spacing-unit * 1);
-    vertical-align: middle;
+    flex-shrink: 0;
 
     &--online {
       background-color: #22c55e;
@@ -70,10 +73,9 @@
   &__repack-title {
     color: globals.$muted-color;
     word-break: break-word;
-  }
-
-  &__repack-title-text {
-    word-break: break-word;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1);
   }
 
   &__repack-info {
@@ -87,9 +89,8 @@
     border-radius: 6px;
     font-size: 9px;
     text-align: center;
+    flex-shrink: 0;
     border: 1px solid rgba(34, 197, 94, 0.5);
-    margin-left: calc(globals.$spacing-unit * 1);
-    vertical-align: middle;
   }
 
   &__no-results {
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
index 77f70187..1a1132f1 100644
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx
@@ -388,16 +388,15 @@ export function RepacksModal({
                   onClick={() => handleRepackClick(repack)}
                   className="repacks-modal__repack-button"
                 >
+                  <span
+                    className={`repacks-modal__availability-orb repacks-modal__availability-orb--${availabilityStatus}`}
+                    data-tooltip-id={tooltipId}
+                    data-tooltip-content={t(`source_${availabilityStatus}`)}
+                  />
+                  <Tooltip id={tooltipId} />
+
                   <p className="repacks-modal__repack-title">
-                    <span className="repacks-modal__repack-title-text">
-                      {repack.title}
-                    </span>
-                    <span
-                      className={`repacks-modal__availability-orb repacks-modal__availability-orb--${availabilityStatus}`}
-                      data-tooltip-id={tooltipId}
-                      data-tooltip-content={t(`source_${availabilityStatus}`)}
-                    />
-                    <Tooltip id={tooltipId} />
+                    {repack.title}
                     {userPreferences?.enableNewDownloadOptionsBadges !==
                       false &&
                       isNewRepack(repack) && (