From 4b83ff5614b9ae59e4f1ffddaec3150c20de6b11 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 18 Jun 2026 13:12:35 +0300
Subject: [PATCH] Fix tournament nav layout shift

Closes #3157
---
 app/features/tournament/routes/to.$id.tsx | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/app/features/tournament/routes/to.$id.tsx b/app/features/tournament/routes/to.$id.tsx
index 7c54a0b0c..ec7707883 100644
--- a/app/features/tournament/routes/to.$id.tsx
+++ b/app/features/tournament/routes/to.$id.tsx
@@ -4,7 +4,6 @@ import {
 	Outlet,
 	type ShouldRevalidateFunction,
 	useLoaderData,
-	useMatches,
 	useOutletContext,
 } from "react-router";
 import { containerClassName, Main } from "~/components/Main";
@@ -98,7 +97,6 @@ export function TournamentLayout() {
 		[data],
 	);
 	const [bracketExpanded, setBracketExpanded] = React.useState(true);
-	const mainBreakout = useActiveRouteMainBreakout();
 
 	useTournamentChatLabels(tournament);
 
@@ -134,25 +132,15 @@ export function TournamentLayout() {
 		</>
 	);
 
+	// Always render within the breakout container so the nav (and content) keep a
+	// consistent width across routes, avoiding a layout shift when switching tabs.
 	return (
-		<Main bigger breakoutContainer={mainBreakout}>
-			{mainBreakout ? (
-				<div className={containerClassName("wide")}>{content}</div>
-			) : (
-				content
-			)}
+		<Main breakoutContainer>
+			<div className={containerClassName("wide")}>{content}</div>
 		</Main>
 	);
 }
 
-function useActiveRouteMainBreakout(): boolean {
-	const matches = useMatches();
-
-	return matches.some(
-		(match) => (match.handle as SendouRouteHandle | undefined)?.mainBreakout,
-	);
-}
-
 type TournamentContext = {
 	tournament: Tournament;
 	bracketExpanded: boolean;