Tournaments league mode (#3411)

app/features/availability/components/RegistrationAvailabilityPanel.module.css

@@ -72,7 +72,8 @@
 .nameBlock {
 	display: flex;
 	flex-direction: column;
-	min-width: 0;
+	flex-shrink: 0;
+	max-width: 50%;
 }
 
 .name {
@@ -98,8 +99,15 @@
 }
 
 .ranges {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 0.25em;
+	min-width: 0;
 	color: var(--color-text-high);
 	font-variant-numeric: tabular-nums;
+}
+
+.range {
 	white-space: nowrap;
 }
 

app/features/availability/components/RegistrationAvailabilityPanel.tsx

@@ -301,7 +301,14 @@ function RangesText({ ranges }: { ranges: Array<TimeRange> }) {
 	const rangeText = useRangeText();
 
 	return (
-		<span className={styles.ranges}>{ranges.map(rangeText).join(" · ")}</span>
+		<span className={styles.ranges}>
+			{ranges.map((range, index) => (
+				<span key={index} className={styles.range}>
+					{index > 0 ? "· " : null}
+					{rangeText(range)}
+				</span>
+			))}
+		</span>
 	);
 }