From e30d3dac5eb6cb1aa2838a6a151ece46ff1b1781 Mon Sep 17 00:00:00 2001
From: Cailyn Sinclair <choover11@gmail.com>
Date: Mon, 11 May 2026 21:47:13 -0700
Subject: [PATCH 1/2] Use mobile section picker for competition tabs

---
 .../CompetitionLayout/CompetitionLayout.tsx   | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/layouts/CompetitionLayout/CompetitionLayout.tsx b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
index cd496bb..e520f49 100644
--- a/src/layouts/CompetitionLayout/CompetitionLayout.tsx
+++ b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { useEffect, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Outlet, useLocation, useParams } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { BarLoader } from 'react-spinners';
 import { ErrorFallback, LastFetchedAt, NoteBox, NotifyCompRemoteBar } from '@/components';
 import { Container } from '@/components/Container';
@@ -15,6 +15,7 @@ export function CompetitionLayout() {
   const { online } = useApp();
   const { competitionId } = useParams();
   const { pathname } = useLocation();
+  const navigate = useNavigate();
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -31,8 +32,28 @@ export function CompetitionLayout() {
 
   const Header = (
     <nav className="z-10 flex justify-center w-full shadow-md shadow-tertiary-dark print:hidden bg-panel">
-      <Container className="justify-between md:flex-row">
-        <div className="flex">
+      <Container className="justify-between md:flex-row space-y-2 md:space-y-0">
+        <div className="flex md:hidden w-full p-2">
+          <label className="flex w-full items-center space-x-2" htmlFor="competition-section-nav">
+            <span className="type-meta text-muted">Section</span>
+            <select
+              className="w-full rounded-md border border-tertiary-weak bg-panel p-2"
+              id="competition-section-nav"
+              onChange={(event) => {
+                void navigate(event.target.value);
+              }}
+              value={pathname}>
+              {tabs
+                .filter((tab) => !tab.hiddenOnMobile)
+                .map((tab) => (
+                  <option key={tab.href} value={tab.href}>
+                    {tab.text}
+                  </option>
+                ))}
+            </select>
+          </label>
+        </div>
+        <div className="hidden md:flex">
           {tabs.map((i) => (
             <StyledNavLink
               key={i.href}

From dffb923041e5e2817f90587518cddb53dba57ca1 Mon Sep 17 00:00:00 2001
From: Cailyn Sinclair <choover11@gmail.com>
Date: Mon, 11 May 2026 21:59:28 -0700
Subject: [PATCH 2/2] Replace mobile tab dropdown with wrapped tab grid

---
 .../CompetitionLayout/CompetitionLayout.tsx   | 29 +++----------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/layouts/CompetitionLayout/CompetitionLayout.tsx b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
index e520f49..f84c936 100644
--- a/src/layouts/CompetitionLayout/CompetitionLayout.tsx
+++ b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { useEffect, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Outlet, useLocation, useParams } from 'react-router-dom';
 import { BarLoader } from 'react-spinners';
 import { ErrorFallback, LastFetchedAt, NoteBox, NotifyCompRemoteBar } from '@/components';
 import { Container } from '@/components/Container';
@@ -15,7 +15,6 @@ export function CompetitionLayout() {
   const { online } = useApp();
   const { competitionId } = useParams();
   const { pathname } = useLocation();
-  const navigate = useNavigate();
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -32,32 +31,12 @@ export function CompetitionLayout() {
 
   const Header = (
     <nav className="z-10 flex justify-center w-full shadow-md shadow-tertiary-dark print:hidden bg-panel">
-      <Container className="justify-between md:flex-row space-y-2 md:space-y-0">
-        <div className="flex md:hidden w-full p-2">
-          <label className="flex w-full items-center space-x-2" htmlFor="competition-section-nav">
-            <span className="type-meta text-muted">Section</span>
-            <select
-              className="w-full rounded-md border border-tertiary-weak bg-panel p-2"
-              id="competition-section-nav"
-              onChange={(event) => {
-                void navigate(event.target.value);
-              }}
-              value={pathname}>
-              {tabs
-                .filter((tab) => !tab.hiddenOnMobile)
-                .map((tab) => (
-                  <option key={tab.href} value={tab.href}>
-                    {tab.text}
-                  </option>
-                ))}
-            </select>
-          </label>
-        </div>
-        <div className="hidden md:flex">
+      <Container className="justify-between md:flex-row">
+        <div className="flex w-full flex-wrap p-2">
           {tabs.map((i) => (
             <StyledNavLink
               key={i.href}
-              className={classNames({
+              className={classNames('basis-1/2 type-body-sm md:basis-auto md:type-body', {
                 'hidden md:block': i.hiddenOnMobile,
               })}
               to={i.href}