Fix broken mods state appearance

Not a complete rework. This is just a temporary improvement.

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;
+    }
 }

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 {