From 4a77161246d1213ecf23f700e69a49872cdf01b8 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 21 Jun 2026 16:28:34 +0300
Subject: [PATCH] Wrap chips in export dialog

---
 app/components/elements/ChipRadio.module.css              | 5 +++++
 app/components/elements/ChipRadio.tsx                     | 3 +++
 app/features/tournament-admin/components/ExportDialog.tsx | 2 +-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/elements/ChipRadio.module.css b/app/components/elements/ChipRadio.module.css
index 7618eb9a0..069b3aa13 100644
--- a/app/components/elements/ChipRadio.module.css
+++ b/app/components/elements/ChipRadio.module.css
@@ -7,6 +7,11 @@
 		flex-direction: column;
 		align-items: stretch;
 	}
+
+	&[data-wrap="true"] {
+		flex-wrap: wrap;
+		width: auto;
+	}
 }
 
 .label {
diff --git a/app/components/elements/ChipRadio.tsx b/app/components/elements/ChipRadio.tsx
index b2ff38162..e2b21bdfc 100644
--- a/app/components/elements/ChipRadio.tsx
+++ b/app/components/elements/ChipRadio.tsx
@@ -3,6 +3,7 @@ import styles from "./ChipRadio.module.css";
 interface SendouChipRadioGroupProps {
 	children: React.ReactNode;
 	orientation?: "horizontal" | "vertical";
+	wrap?: boolean;
 	className?: string;
 }
 
@@ -17,12 +18,14 @@ interface SendouChipRadioProps {
 export function SendouChipRadioGroup({
 	children,
 	orientation = "horizontal",
+	wrap = false,
 	className,
 }: SendouChipRadioGroupProps) {
 	return (
 		<div
 			className={className ? `${styles.group} ${className}` : styles.group}
 			data-orientation={orientation}
+			data-wrap={wrap}
 			role="radiogroup"
 		>
 			{children}
diff --git a/app/features/tournament-admin/components/ExportDialog.tsx b/app/features/tournament-admin/components/ExportDialog.tsx
index 00ff510b0..306de7bb7 100644
--- a/app/features/tournament-admin/components/ExportDialog.tsx
+++ b/app/features/tournament-admin/components/ExportDialog.tsx
@@ -222,7 +222,7 @@ function RadioRow<T extends string>({
 	return (
 		<div className="stack sm">
 			<div className="text-sm font-bold">{label}</div>
-			<SendouChipRadioGroup>
+			<SendouChipRadioGroup wrap>
 				{options.map((option) => (
 					<SendouChipRadio
 						key={option.value}