slop

frontend/src/App.jsx

@@ -5348,15 +5348,15 @@ function TournamentStandings({ standings }) {
 function TournamentListColumn({ column, navigate }) {
   const [collapsed, setCollapsed] = useState(false)
   return (
-    <div className="tournament-list-column">
+    <div className={`tournament-list-column${collapsed ? ' is-collapsed' : ''}`}>
       <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"
+        className="tournament-list-round-btn"
         onClick={() => setCollapsed((v) => !v)}
+        title={collapsed ? 'Expand round' : 'Collapse round'}
         type="button"
       >
         {column.label}
-        <span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
       </button>
       {collapsed ? null : (
         <div className="grid grid-cols-2 gap-3">
@@ -5374,27 +5374,18 @@ function TournamentListColumn({ column, navigate }) {
 }
 
 function TournamentListSide({ side, navigate }) {
-  const [collapsed, setCollapsed] = useState(false)
   return (
     <div className="bracket-side">
-      <button
+      <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-fury-violet">
-        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((v) => !v)}
-        type="button"
-      >
         {side.label}
-        <span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
+      </p>
-      </button>
+      <BracketViewport>
-      {collapsed ? null : (
+        <div className="tournament-bracket-grid">
-        <BracketViewport>
+          {side.columns.map((column) => (
-          <div className="tournament-bracket-grid">
+            <TournamentListColumn column={column} key={column.id} navigate={navigate} />
-            {side.columns.map((column) => (
+          ))}
-              <TournamentListColumn column={column} key={column.id} navigate={navigate} />
+        </div>
-            ))}
+      </BracketViewport>
-          </div>
-        </BracketViewport>
-      )}
     </div>
   )
 }

frontend/src/styles.css

@@ -921,13 +921,42 @@ h3 {
 }
 
 /* List-style column inside the bracket viewport (Swiss / group rounds).
-   Two cards side by side; wider than the 200px bracket column. */
+   Label sits on the left as a vertical strip; cards fill the right. */
 .tournament-list-column {
   position: relative;
   z-index: 1;
   display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem;
   min-width: 440px;
-  flex-direction: column;
+}
+
+.tournament-list-column.is-collapsed {
+  min-width: 0;
+}
+
+.tournament-list-round-btn {
+  writing-mode: vertical-lr;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.375rem;
+  border-right: 1px solid var(--color-border);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+
+.tournament-list-round-btn:hover {
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
 }
 
 .bracket-caret {