Feat: Decks page.

static/css/pages/tcg/games.css

@@ -33,15 +33,18 @@
     position: relative;
     animation: tcg-fadeIn 0.8s ease-out 0.2s backwards;
     margin: 2vh auto;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     flex-wrap: wrap;
     gap: 1rem;
+    width: 100%;
 }
 
 /* Filters Form */
@@ -88,8 +91,7 @@
     overflow-x: auto;
 }
 
-.games-table {
-    width: 100%;
+#tableMain.games-table {
     border-collapse: collapse;
     font-size: 1rem;
 }
@@ -98,7 +100,6 @@
     background: var(--tcg-bg-card);
     border-bottom: 2px solid var(--tcg-accent-purple);
 }
-
 .games-table th {
     font-family: 'Cinzel', serif;
     font-size: 0.95rem;
@@ -107,18 +108,22 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
     padding: 1rem;
-    text-align: left;
+}
+.games-table thead tr {
+    height: 4vh;
 }
 
+#tableMain.games-table tbody {
+    max-height: 59vh;
+}
 .games-table tbody tr {
     border-bottom: 1px solid var(--tcg-border-color);
     transition: all 0.3s ease;
+    height: 4vh;
 }
-
 .games-table tbody tr:hover {
     background: rgba(139, 92, 246, 0.1);
 }
-
 .games-table tbody tr.inactive {
     opacity: 0.5;
 }
@@ -132,7 +137,38 @@
     color: white;
 }
 
-.game-id {
+.games-table thead tr th.game_id,
+.games-table tbody tr td.game_id {
+    min-width: 10vh;
+    max-width: 10vh;
+}
+.games-table thead tr th.is_commander,
+.games-table tbody tr td.is_commander {
+    min-width: 12vh;
+    max-width: 12vh;
+}
+.games-table thead tr th.location_name,
+.games-table tbody tr td.location_name {
+    min-width: 20vh;
+    max-width: 20vh;
+}
+.games-table thead tr th.start_on,
+.games-table tbody tr td.start_on {
+    min-width: 14vh;
+    max-width: 14vh;
+}
+#tableMain.games-table thead tr th.active,
+#tableMain.games-table tbody tr td.active {
+    min-width: 8vh;
+    max-width: 8vh;
+}
+.games-table thead tr th.navMtgGame,
+.games-table tbody tr td.navMtgGame {
+    min-width: 13vh;
+    max-width: 13vh;
+}
+
+.game_id {
     font-family: 'Cinzel', serif;
     font-weight: 600;
     color: var(--tcg-text-secondary);
@@ -223,7 +259,7 @@
 
 /* Join Button */
 .btn-join {
-    padding: 0.5rem 1.25rem;
+    padding: 0.5vh 1vw;
     font-size: 0.9rem;
 }
 
@@ -265,7 +301,7 @@
     animation: tcg-fadeIn 0.3s ease-out;
 }
 
-.modal-overlay.hidden {
+.modal-overlay.is_collapsed {
     display: none;
 }
 
@@ -338,7 +374,6 @@
     }
 
     .section-header {
-        flex-direction: column;
         align-items: stretch;
     }