From 52a8cd20236acdf8fa294e53b277df461fbf47e3 Mon Sep 17 00:00:00 2001
From: FURRO404 <frostyboy2016.liam@gmail.com>
Date: Sun, 21 Jun 2026 02:30:32 -0700
Subject: [PATCH 1/2] meow

---
 frontend/src/App.jsx    | 2 +-
 frontend/src/styles.css | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5d41b2c..0c2b351 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4263,7 +4263,7 @@ function TournamentDetailPage({ tournamentId, navigate }) {
           ) : null}
 
           {bracketSides.length ? (
-            <div className="space-y-6">
+            <div className="space-y-12">
               {hasStandings || listSides.length ? (
                 <h2 className="text-lg font-semibold">Playoffs</h2>
               ) : null}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 00d4897..7680f17 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -836,13 +836,14 @@ h3 {
    tactical grid that pans with the bracket (it lives on the scrolling content). */
 .bracket-viewport {
   position: relative;
-  width: 100vw;
-  margin-left: calc(50% - 50vw);
+  width: 85vw;
+  margin-left: calc(50% - 42.5vw);
   max-height: 78vh;
   overflow: auto;
   overscroll-behavior: contain;
   cursor: grab;
-  border-block: 1px solid var(--color-border);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
   background-color: color-mix(in srgb, var(--color-bg) 86%, #000);
 }
 

From 993b9e4e2f73fda26780506603ff2957e38564ad Mon Sep 17 00:00:00 2001
From: FURRO404 <frostyboy2016.liam@gmail.com>
Date: Sun, 21 Jun 2026 02:53:20 -0700
Subject: [PATCH 2/2] meow

---
 frontend/src/App.jsx    | 21 +++++++++++++++++----
 frontend/src/styles.css | 26 ++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0c2b351..cd106e6 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3934,6 +3934,8 @@ function BracketViewport({ children }) {
         start.moved = true
         bracketPan.dragged = true
         el.classList.add('is-grabbing')
+        // Drop any text selection the initial press may have started.
+        window.getSelection()?.removeAllRanges()
       }
       if (start.moved) {
         el.scrollLeft = start.sl - dx
@@ -3979,6 +3981,7 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
   // `tops` places each match; once placed we read back the DOM to draw connectors.
   const [layout, setLayout] = useState({ tops: new Map(), height: 0 })
   const [connectors, setConnectors] = useState({ width: 0, height: 0, lines: [], byes: [] })
+  const [collapsed, setCollapsed] = useState(false)
 
   // Pass 1: measure card heights, then position every match centred on its feeders.
   useLayoutEffect(() => {
@@ -3994,7 +3997,7 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
     const observer = new ResizeObserver(relayout)
     observer.observe(grid)
     return () => observer.disconnect()
-  }, [side])
+  }, [side, collapsed])
 
   // Pass 2: with matches positioned, read real edges and draw elbow connectors.
   // Each connector carries the teams on either end so a hovered team's whole run
@@ -4040,13 +4043,22 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
       }
     }
     setConnectors({ width: grid.scrollWidth, height: grid.scrollHeight, lines, byes })
-  }, [side, layout])
+  }, [side, layout, collapsed])
 
   const active = Boolean(highlight)
 
   return (
-    <div>
-      <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-fury-violet">{side.label}</h3>
+    <div className="bracket-side">
+      <button
+        aria-expanded={!collapsed}
+        className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-fury-violet transition hover:text-text"
+        onClick={() => setCollapsed((value) => !value)}
+        type="button"
+      >
+        <span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
+        {side.label}
+      </button>
+      {collapsed ? null : (
       <BracketViewport>
         <div className={`tournament-bracket-grid${active ? ' has-trace' : ''}`} ref={gridRef}>
           <svg
@@ -4101,6 +4113,7 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
           ))}
         </div>
       </BracketViewport>
+      )}
     </div>
   )
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 7680f17..71d013e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -834,10 +834,26 @@ h3 {
 /* The bracket reads as a campaign map you drag around. The viewport breaks the
    page's max-width so there's room to manoeuvre; the surface carries a faint
    tactical grid that pans with the bracket (it lives on the scrolling content). */
-.bracket-viewport {
-  position: relative;
+/* The whole side (heading + canvas) breaks out to 85vw and centres on the
+   viewport, so the WINNER/LOSER heading aligns with the canvas's left edge. */
+.bracket-side {
   width: 85vw;
   margin-left: calc(50% - 42.5vw);
+}
+
+.bracket-caret {
+  display: inline-block;
+  font-size: 0.7em;
+  transition: transform 0.18s ease;
+}
+
+.bracket-caret.is-collapsed {
+  transform: rotate(-90deg);
+}
+
+.bracket-viewport {
+  position: relative;
+  width: 100%;
   max-height: 78vh;
   overflow: auto;
   overscroll-behavior: contain;
@@ -849,6 +865,12 @@ h3 {
 
 .bracket-viewport.is-grabbing {
   cursor: grabbing;
+  user-select: none;
+}
+
+/* While panning, don't let the drag turn into a text selection. */
+.bracket-viewport.is-grabbing * {
+  user-select: none;
 }
 
 .tournament-bracket-grid {