From d95fce70331945835794ed02873660c4f4043e27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B0=D0=BD=D0=B8=D1=97=D0=BB=20=D0=93=D1=80=D0=B8?=
 =?UTF-8?q?=D0=B3=D0=BE=D1=80=27=D1=94=D0=B2?= <dengr1065@gmail.com>
Date: Sun, 13 Apr 2025 03:44:30 +0300
Subject: [PATCH] Fix broken mods state appearance

Not a complete rework. This is just a temporary improvement.
---
 src/css/states/mods.scss | 48 ++++++++++++++++++++++++----------------
 src/js/states/mods.tsx   |  6 +----
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/css/states/mods.scss b/src/css/states/mods.scss
index 4a060f91..ab10d767 100644
--- a/src/css/states/mods.scss
+++ b/src/css/states/mods.scss
@@ -1,31 +1,41 @@
 #state_ModsState {
+    // TODO: Update dimensions to use less build-time logic
     .modsGrid {
         display: grid;
-        grid-template-columns: 1fr auto;
-        align-items: center;
-
-        > h1 {
-            justify-self: start;
-        }
-
-        .openModsFolder {
-            background-color: $modsColor;
-        }
+        grid-template-columns: repeat(2, 1fr);
+        @include S(gap, 10px);
     }
 
-    .modsStats {
-        @include PlainText;
+    .modsGrid.noMods {
+        grid-template-columns: unset;
+        place-items: center;
+    }
 
-        .title b {
-            @include Text;
-        }
+    .mod {
+        width: 100%;
+        box-sizing: border-box;
+        @include S(padding, 10px);
 
-        .advanced {
-            @include SuperSmallText;
-        }
+        @include S(border-radius, 4px);
+        background: #eee;
 
         @include DarkThemeOverride {
-            background-color: $darkModeGameBackground;
+            background: lighten($darkModeControlsBackground, 5);
         }
     }
+
+    .mod > .title {
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .mod > .description {
+        @include PlainText();
+    }
+
+    .mod > .advanced {
+        @include PlainText();
+        color: $accentColorDark;
+    }
 }
diff --git a/src/js/states/mods.tsx b/src/js/states/mods.tsx
index cef657e6..68dc9795 100644
--- a/src/js/states/mods.tsx
+++ b/src/js/states/mods.tsx
@@ -22,11 +22,7 @@ export class ModsState extends TextualGameState {
             modElements.push(this.getNoModsMessage());
         }
 
-        return (
-            <div class="content">
-                <div class={`modsGrid ${hasMods ? "" : "noMods"}`}>{modElements}</div>
-            </div>
-        );
+        return <div class={`modsGrid ${hasMods ? "" : "noMods"}`}>{modElements}</div>;
     }
 
     private getModElement(mod: Mod): HTMLElement {