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 ( -
- {mainBreakout ? ( -
{content}
- ) : ( - content - )} +
+
{content}
); } -function useActiveRouteMainBreakout(): boolean { - const matches = useMatches(); - - return matches.some( - (match) => (match.handle as SendouRouteHandle | undefined)?.mainBreakout, - ); -} - type TournamentContext = { tournament: Tournament; bracketExpanded: boolean;