swiss cheese

frontend/src/App.jsx

@@ -5574,6 +5574,34 @@ function TeamTotalsRoundTable({ teams, highlight, onHover, navigate }) {
   )
 }
 
+function TeamTotalsColumn({ round, navigate, highlight, onHover }) {
+  const [collapsed, setCollapsed] = useState(false)
+  return (
+    <div className={`tournament-list-column${collapsed ? ' is-collapsed' : ''}`}>
+      <button
+        aria-expanded={!collapsed}
+        className="tournament-list-round-btn"
+        onClick={() => setCollapsed((v) => !v)}
+        title={collapsed ? 'Expand round' : 'Collapse round'}
+        type="button"
+      >
+        {round.label}
+        <span aria-hidden="true" className={`tournament-list-round-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
+      </button>
+      {collapsed ? null : (
+        <div className="min-w-0 flex-1">
+          <TeamTotalsRoundTable
+            teams={round.teams}
+            highlight={highlight}
+            onHover={onHover}
+            navigate={navigate}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
 function TeamTotals({ sides, navigate, highlight, onHover }) {
   const roundTotals = useMemo(() => {
     return sides.flatMap((side) => {
@@ -5612,23 +5640,13 @@ function TeamTotals({ sides, navigate, highlight, onHover }) {
       <BracketViewport>
         <div className={`tournament-bracket-grid${active ? ' has-trace' : ''}`}>
           {roundTotals.map((round, index) => (
-            <div className="tournament-list-column" key={index}>
+            <TeamTotalsColumn
-              <button
+              highlight={highlight}
-                aria-expanded
+              key={index}
-                className="tournament-list-round-btn"
+              navigate={navigate}
-                type="button"
+              onHover={onHover}
-              >
+              round={round}
-                {round.label}
+            />
-              </button>
-              <div className="min-w-0 flex-1">
-                <TeamTotalsRoundTable
-                  teams={round.teams}
-                  highlight={highlight}
-                  onHover={onHover}
-                  navigate={navigate}
-                />
-              </div>
-            </div>
           ))}
         </div>
       </BracketViewport>
@@ -5685,7 +5703,7 @@ function TournamentDetailPage({ tournamentId, navigate }) {
         Back to tournaments
       </button>
 
-      <div className="rounded-lg border border-border bg-fury-white p-6 shadow-sm">
+      <div className="bracket-side rounded-lg border border-border bg-fury-white p-6 shadow-sm">
         <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
           <p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">
             Tournament — <span className="text-text-muted opacity-70">{tournamentId}</span>

frontend/src/styles.css

@@ -944,7 +944,7 @@ h3 {
   justify-content: center;
   padding: 0.5rem 0.375rem;
   border-right: 1px solid var(--color-border);
-  font-size: 0.65rem;
+  font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;