Make faction list responsive (#296)

Make the faction list turn into two column when the display is greater than 1400px wide.
iamlogand · Oct 13, 2023 · eae62a2 · eae62a2
1 parent 412964f
commit eae62a2
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/frontend/components/FactionList.module.css b/frontend/components/FactionList.module.css
@@ -12,13 +12,20 @@
 }
 
 .list {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 8px;
   padding: 8px;
 }
 
+@media (max-width: 1400px) {
+  .list {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .listItem {
   display: flex;
 }