Stylings

components/home/FactorySelect/FactorySelect.module.css

@@ -1,3 +1,7 @@
+.option {
+    padding: 0.3em;
+}
+
 @media (prefers-color-scheme: dark) {
     .select :global(.factory-select__control) {
         background-color: #222;
@@ -8,15 +12,11 @@
         background-color: #444;
     }
 
-    .option {
-        padding: 0.3em;
-    }
-
     .option:is(:hover, :focus-visible) {
         background-color: black;
     }
 
     .select :global(.factory-select__multi-value__label) {
-        color: #dddddd;
+        color: #ddd;
     }
 }

components/home/Home.module.css

@@ -1,8 +1,8 @@
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(500px, max-content));
-    gap: 1em;
     margin-top: 2em;
+    gap: 1em;
+    grid-template-columns: repeat(auto-fit, minmax(450px, max-content));
 }
 
 .missingFactories {
@@ -14,3 +14,9 @@
 .missingFactories > * {
     width: max-content;
 }
+
+@media (max-width: 600px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}