MapPoolSelector a bit better mobile layout

app/routes/calendar/components/MapPoolSelector.tsx

@@ -6,7 +6,6 @@ import { modes, stageIds } from "~/modules/in-game-lists";
 import { type MapPool } from "~/modules/map-pool-serializer";
 import { modeImageUrl, stageImageUrl } from "~/utils/urls";
 
-// xxx: maybe better mobile layout?
 export function MapPoolSelector({
   mapPool,
   handleMapPoolChange,

app/routes/calendar/new.tsx

@@ -525,7 +525,6 @@ function BadgesAdder() {
   );
 }
 
-// xxx: maybe better mobile layout?
 const DEFAULT_MAP_POOL = {
   SZ: [],
   TC: [],

app/routes/maps.tsx

@@ -11,9 +11,7 @@ import { Image } from "~/components/Image";
 import { Label } from "~/components/Label";
 import { Main } from "~/components/Main";
 import { Toggle } from "~/components/Toggle";
-import { ADMIN_DISCORD_ID } from "~/constants";
 import { db } from "~/db";
-import { useUser } from "~/modules/auth";
 import {
   modes,
   stageIds,

app/styles/maps.css

@@ -16,6 +16,7 @@
 
 .maps__stage-name-row {
   display: flex;
+  flex-direction: column;
   flex-grow: 1;
   align-items: center;
   justify-content: space-between;
@@ -23,11 +24,17 @@
   border-radius: var(--rounded);
   font-size: var(--fonts-xs);
   font-weight: var(--semi-bold);
-  gap: var(--s-0-5);
+  gap: var(--s-2);
   padding-block: var(--s-1-5);
   padding-inline: var(--s-3);
 }
 
+@media screen and (min-width: 640px) {
+  .maps__stage-name-row {
+    flex-direction: row;
+  }
+}
+
 .maps__mode-buttons-container {
   display: flex;
   flex-wrap: wrap;