slop

frontend/src/App.jsx

@@ -5065,11 +5065,26 @@ function noOpponentTooltip(match, roundLabel) {
 // threshold pans (and suppresses the click). Move/up live on the window so a fast
 // drag keeps panning even when the cursor leaves the canvas.
 function BracketViewport({ children }) {
+  const containerRef = useRef(null)
   const ref = useRef(null)
+  const [fsActive, setFsActive] = useState(false)
+
+  useEffect(() => {
+    const handler = () => setFsActive(Boolean(document.fullscreenElement))
+    document.addEventListener('fullscreenchange', handler)
+    return () => document.removeEventListener('fullscreenchange', handler)
+  }, [])
+
+  const toggleFs = (event) => {
+    event.stopPropagation()
+    if (document.fullscreenElement) document.exitFullscreen()
+    else containerRef.current?.requestFullscreen()
+  }
 
   const onPointerDown = (event) => {
     const el = ref.current
     if (!el || event.button !== 0) return
+    if (event.target.closest('[data-fs-btn]')) return
     const start = { x: event.clientX, y: event.clientY, sl: el.scrollLeft, st: el.scrollTop, moved: false }
     bracketPan.dragged = false
 
@@ -5102,8 +5117,19 @@ function BracketViewport({ children }) {
   }
 
   return (
-    <div className="bracket-viewport" onPointerDown={onPointerDown} ref={ref}>
-      {children}
+    <div className="bracket-fs-container" ref={containerRef}>
+      <div className="bracket-viewport" onPointerDown={onPointerDown} ref={ref}>
+        {children}
+      </div>
+      <button
+        className="bracket-fs-btn"
+        data-fs-btn=""
+        onClick={toggleFs}
+        title={fsActive ? 'Exit fullscreen' : 'Fullscreen'}
+        type="button"
+      >
+        {fsActive ? '✕' : '⛶'}
+      </button>
     </div>
   )
 }
@@ -5322,7 +5348,7 @@ function TournamentStandings({ standings }) {
 function TournamentListColumn({ column, navigate }) {
   const [collapsed, setCollapsed] = useState(false)
   return (
-    <div className="tournament-round-column">
+    <div className="tournament-list-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"
@@ -5333,7 +5359,7 @@ function TournamentListColumn({ column, navigate }) {
         <span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
       </button>
       {collapsed ? null : (
-        <div className="flex flex-col gap-3">
+        <div className="grid grid-cols-2 gap-3">
           {column.matches.map((match) => (
             <TournamentMatchCard
               key={`${match.type_bracket}-${match.match_id}`}

frontend/src/styles.css

@@ -884,6 +884,52 @@ h3 {
   margin-left: calc(50% - 42.5vw);
 }
 
+.bracket-fs-container {
+  position: relative;
+}
+
+.bracket-fs-container:fullscreen {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg);
+}
+
+.bracket-fs-container:fullscreen .bracket-viewport {
+  flex: 1;
+  max-height: none;
+}
+
+.bracket-fs-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 10;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: color 0.15s;
+  line-height: 1;
+}
+
+.bracket-fs-btn:hover {
+  color: var(--color-text);
+}
+
+/* List-style column inside the bracket viewport (Swiss / group rounds).
+   Two cards side by side; wider than the 200px bracket column. */
+.tournament-list-column {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-width: 440px;
+  flex-direction: column;
+}
+
 .bracket-caret {
   display: inline-block;
   font-size: 1.35rem;