refactor: fix some styles in game details modals

src/renderer/src/pages/game-details/modals/download-settings-modal.scss

@@ -10,11 +10,12 @@
 
   &__downloads-path-field {
     display: flex;
+    flex-direction: column;
     gap: globals.$spacing-unit;
   }
 
   &__hint-text {
-    font-size: globals.$small-font-size;
+    font-size: 12px;
     color: globals.$body-color;
   }
 

src/renderer/src/pages/game-details/modals/game-options-modal.scss

@@ -7,18 +7,80 @@
     flex-direction: column;
   }
 
-  &__header {
+  &__section {
     display: flex;
     flex-direction: column;
     gap: globals.$spacing-unit;
   }
 
-  &__header-description {
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-description {
       font-weight: 400;
     }
+  }
 
   &__row {
     display: flex;
     gap: globals.$spacing-unit;
   }
+
+  &__executable-field {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-input {
+      width: 100%;
+    }
+
+    &-buttons {
+      display: flex;
+      gap: globals.$spacing-unit;
+    }
+  }
+
+  &__wine-prefix {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+
+    &-input {
+      width: 100%;
+    }
+  }
+
+  &__launch-options {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-input {
+      width: 100%;
+    }
+  }
+
+  &__downloads {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__danger-zone {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+
+    &-description {
+      font-weight: 400;
+    }
+
+    &-buttons {
+      display: flex;
+      gap: globals.$spacing-unit;
+    }
+  }
 }

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -2,7 +2,6 @@ import { useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Modal, TextField } from "@renderer/components";
 import type { Game } from "@types";
-import * as styles from "./game-options-modal.css";
 import { gameDetailsContext } from "@renderer/context";
 import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@@ -179,14 +178,12 @@ export function GameOptionsModal({
         onClose={() => setShowDeleteModal(false)}
         deleteGame={handleDeleteGame}
       />
-
       <RemoveGameFromLibraryModal
         visible={showRemoveGameModal}
         onClose={() => setShowRemoveGameModal(false)}
         removeGameFromLibrary={handleRemoveGameFromLibrary}
         game={game}
       />
-
       <ResetAchievementsModal
         visible={showResetAchievementsModal}
         onClose={() => setShowResetAchievementsModal(false)}
@@ -201,6 +198,7 @@ export function GameOptionsModal({
         large={true}
       >
         <div className="game-options-modal__container">
+          <div className="game-options-modal__section">
             <div className="game-options-modal__header">
               <h2>{t("executable_section_title")}</h2>
               <h4 className="game-options-modal__header-description">
@@ -208,6 +206,7 @@ export function GameOptionsModal({
               </h4>
             </div>
 
+            <div className="game-options-modal__executable-field">
               <TextField
                 value={game.executablePath || ""}
                 readOnly
@@ -225,7 +224,10 @@ export function GameOptionsModal({
                       {t("select_executable")}
                     </Button>
                     {game.executablePath && (
-                  <Button onClick={handleClearExecutablePath} theme="outline">
+                      <Button
+                        onClick={handleClearExecutablePath}
+                        theme="outline"
+                      >
                         {t("clear")}
                       </Button>
                     )}
@@ -234,7 +236,7 @@ export function GameOptionsModal({
               />
 
               {game.executablePath && (
-            <div className={styles.gameOptionRow}>
+                <div className="game-options-modal__executable-field-buttons">
                   <Button
                     type="button"
                     theme="outline"
@@ -247,12 +249,14 @@ export function GameOptionsModal({
                   </Button>
                 </div>
               )}
+            </div>
+          </div>
 
           {shouldShowWinePrefixConfiguration && (
-            <div className={styles.optionsContainer}>
+            <div className="game-options-modal__wine-prefix">
-              <div className={styles.gameOptionHeader}>
+              <div className="game-options-modal__header">
                 <h2>{t("wine_prefix")}</h2>
-                <h4 className={styles.gameOptionHeaderDescription}>
+                <h4 className="game-options-modal__header-description">
                   {t("wine_prefix_description")}
                 </h4>
               </div>
@@ -287,11 +291,13 @@ export function GameOptionsModal({
           )}
 
           {shouldShowLaunchOptionsConfiguration && (
-            <div className={styles.gameOptionHeader}>
+            <div className="game-options-modal__launch-options">
+              <div className="game-options-modal__header">
                 <h2>{t("launch_options")}</h2>
-              <h4 className={styles.gameOptionHeaderDescription}>
+                <h4 className="game-options-modal__header-description">
                   {t("launch_options_description")}
                 </h4>
+              </div>
               <TextField
                 value={launchOptions}
                 theme="dark"
@@ -308,14 +314,15 @@ export function GameOptionsModal({
             </div>
           )}
 
-          <div className={styles.gameOptionHeader}>
+          <div className="game-options-modal__downloads">
+            <div className="game-options-modal__header">
               <h2>{t("downloads_secion_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
+              <h4 className="game-options-modal__header-description">
                 {t("downloads_section_description")}
               </h4>
             </div>
 
-          <div className={styles.gameOptionRow}>
+            <div className="game-options-modal__row">
               <Button
                 onClick={() => setShowRepacksModal(true)}
                 theme="outline"
@@ -333,15 +340,17 @@ export function GameOptionsModal({
                 </Button>
               )}
             </div>
+          </div>
 
-          <div className={styles.gameOptionHeader}>
+          <div className="game-options-modal__danger-zone">
+            <div className="game-options-modal__header">
               <h2>{t("danger_zone_section_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
+              <h4 className="game-options-modal__danger-zone-description">
                 {t("danger_zone_section_description")}
               </h4>
             </div>
 
-          <div className={styles.gameOptionRow}>
+            <div className="game-options-modal__danger-zone-buttons">
               <Button
                 onClick={() => setShowRemoveGameModal(true)}
                 theme="danger"
@@ -374,6 +383,7 @@ export function GameOptionsModal({
               </Button>
             </div>
           </div>
+        </div>
       </Modal>
     </>
   );