Wrap chips in export dialog

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 {

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}

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}