diff --git a/app/features/tournament/components/TournamentNav.module.css b/app/features/tournament/components/TournamentNav.module.css
index 5267abec9..bad3812b1 100644
--- a/app/features/tournament/components/TournamentNav.module.css
+++ b/app/features/tournament/components/TournamentNav.module.css
@@ -67,7 +67,7 @@
margin: 0;
padding: 0;
display: flex;
- gap: 4px;
+ gap: var(--s-0-5);
flex-wrap: nowrap;
white-space: nowrap;
}
@@ -88,6 +88,7 @@
font-weight: var(--weight-semi);
text-decoration: none;
cursor: pointer;
+ min-width: max-content;
&:hover {
background-color: var(--color-bg-high);
@@ -103,6 +104,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
+ flex-shrink: 0;
}
.icon > svg {
diff --git a/app/features/tournament/components/TournamentNav.tsx b/app/features/tournament/components/TournamentNav.tsx
index e0a7ae883..c2a364e18 100644
--- a/app/features/tournament/components/TournamentNav.tsx
+++ b/app/features/tournament/components/TournamentNav.tsx
@@ -55,19 +55,15 @@ const PRIORITY_ORDER: NavItemKey[] = [
"register",
"lfg",
"brackets",
+ "results",
"teams",
"divisions",
"streams",
- "results",
"rules",
"seeds",
"admin",
];
-// xxx: icons shrinking
-// xxx: sticky for desktop
-// xxx: close popover when changing page
-
export function TournamentNav({
tournament,
hasChildTournaments,
@@ -80,6 +76,7 @@ export function TournamentNav({
const { visibleCount, containerRef, measureRef } = useNavOverflow(
navItems.length,
);
+ const [overflowOpen, setOverflowOpen] = React.useState(false);
const overflowItems = navItems.slice(visibleCount);
@@ -123,9 +120,12 @@ export function TournamentNav({
{overflowItems.length > 0 ? (