From ffd68f0e13b445dceb2fad2d2ab799ec0d5feded Mon Sep 17 00:00:00 2001
From: Clippii <clippii@protonmail.com>
Date: Tue, 23 Jun 2026 03:53:10 +0100
Subject: [PATCH] slop

---
 frontend/src/App.jsx    |  1 +
 frontend/src/styles.css | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3f4cc85..5fe090f 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5357,6 +5357,7 @@ function TournamentListColumn({ column, navigate }) {
         type="button"
       >
         {column.label}
+        <span aria-hidden="true" className={`tournament-list-round-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
       </button>
       {collapsed ? null : (
         <div className="grid grid-cols-2 gap-3">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4ea1416..c5e99ed 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -959,6 +959,26 @@ h3 {
   border-color: var(--color-text-muted);
 }
 
+/* Caret resets to horizontal so it renders upright inside the vertical label. */
+.tournament-list-round-caret {
+  writing-mode: horizontal-tb;
+  display: inline-block;
+  font-size: 1rem;
+  line-height: 1;
+  transition: transform 0.18s ease;
+  margin-top: 0.4rem;
+}
+
+.tournament-list-round-caret.is-collapsed {
+  transform: rotate(-90deg);
+}
+
+/* Divider between round columns. */
+.tournament-list-column:not(:last-child) {
+  border-right: 1px solid var(--color-border);
+  padding-right: 1rem;
+}
+
 .bracket-caret {
   display: inline-block;
   font-size: 1.35rem;