slop

frontend/src/App.jsx

@@ -5319,6 +5319,34 @@ function TournamentStandings({ standings }) {
   )
 }
 
+function TournamentListColumn({ column, navigate }) {
+  const [collapsed, setCollapsed] = useState(false)
+  return (
+    <div className="tournament-round-column">
+      <button
+        aria-expanded={!collapsed}
+        className="mb-3 flex items-center justify-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-text-muted transition hover:text-text"
+        onClick={() => setCollapsed((v) => !v)}
+        type="button"
+      >
+        {column.label}
+        <span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
+      </button>
+      {collapsed ? null : (
+        <div className="flex flex-col gap-3">
+          {column.matches.map((match) => (
+            <TournamentMatchCard
+              key={`${match.type_bracket}-${match.match_id}`}
+              match={match}
+              navigate={navigate}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function TournamentListSide({ side, navigate }) {
   const [collapsed, setCollapsed] = useState(false)
   return (
@@ -5333,22 +5361,13 @@ function TournamentListSide({ side, navigate }) {
         <span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
       </button>
       {collapsed ? null : (
-        <div className="space-y-6">
-          {side.columns.map((column) => (
-            <div key={column.id}>
-              <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-text-muted">{column.label}</p>
-              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-                {column.matches.map((match) => (
-                  <TournamentMatchCard
-                    key={`${match.type_bracket}-${match.match_id}`}
-                    match={match}
-                    navigate={navigate}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
+        <BracketViewport>
+          <div className="tournament-bracket-grid">
+            {side.columns.map((column) => (
+              <TournamentListColumn column={column} key={column.id} navigate={navigate} />
+            ))}
+          </div>
+        </BracketViewport>
       )}
     </div>
   )