From 10293df596219e6f0356764b92f9d8dc15307494 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 19 Mar 2026 18:20:43 +0200
Subject: [PATCH] Better ModeMapPoolPicker alignment

---
 .../components/ModeMapPoolPicker.module.css                 | 5 +++++
 .../sendouq-settings/components/ModeMapPoolPicker.tsx       | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
index 332d90140..5e30bfc6f 100644
--- a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
+++ b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
@@ -93,6 +93,11 @@
 	font-weight: var(--weight-semi);
 }
 
+.mapButtonContainer {
+	width: var(--map-width);
+	text-align: center;
+}
+
 .divider::before,
 .divider::after {
 	border-bottom: 2px dotted var(--color-bg-higher);
diff --git a/app/features/sendouq-settings/components/ModeMapPoolPicker.tsx b/app/features/sendouq-settings/components/ModeMapPoolPicker.tsx
index c52311dda..8bcf483dc 100644
--- a/app/features/sendouq-settings/components/ModeMapPoolPicker.tsx
+++ b/app/features/sendouq-settings/components/ModeMapPoolPicker.tsx
@@ -143,7 +143,9 @@ function MapButton({
 	const { t } = useTranslation(["game-misc"]);
 
 	return (
-		<div className="stack items-center relative">
+		<div
+			className={clsx("stack items-center relative", styles.mapButtonContainer)}
+		>
 			<button
 				className={clsx(styles.mapButton, {
 					[styles.mapButtonWiggle]: wiggle,
@@ -164,7 +166,7 @@ function MapButton({
 				<div className={clsx(styles.mapButtonText, "text-error")}>Banned</div>
 			) : null}
 			<div className={styles.mapButtonLabel}>
-				{t(`game-misc:STAGE_${stageId}`)}
+				{t(`game-misc:STAGE_${stageId}`).split(" ")[0]}
 			</div>
 		</div>
 	);