From 93a81fd82ce0ce7ba5df773cc187c3aee9c42174 Mon Sep 17 00:00:00 2001
From: Jan Meinl <codingphoenix@coph.dev>
Date: Sun, 6 Sep 2026 06:23:54 +0200
Subject: [PATCH] Move competition back button onto the page with a real icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The back button moves out of the topbar to the top-left of the page
above the competition name, and now renders an inline SVG arrow
(iconArrowLeft) instead of the "←" character.
---
 web/competition.js | 13 ++++++++++---
 web/style.css      | 10 ++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/competition.js b/web/competition.js
index 1c372b9..b846b87 100644
--- a/web/competition.js
+++ b/web/competition.js
@@ -1313,6 +1313,12 @@
 
   // ---- Main render -------------------------------------------------------
 
+  function iconArrowLeft() {
+    const s = el("span", { class: "icon" });
+    s.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>';
+    return s;
+  }
+
   function wsIndicator() {
     state.wsDot = el("span", { class: "connection-status " + (state.wsOnline ? "online" : "offline") });
     state.wsText = el("span", { class: "muted" }, state.wsOnline ? t("online") : t("offline"));
@@ -1329,12 +1335,13 @@
 
   function render() {
     clearNode(root);
-    const backBtn = el("button", { class: "ghost",
+    const backBtn = el("button", { class: "ghost btn-back",
       onclick: () => { if (state.ws) { state.ws.close(); state.ws = null; } navigate("competitions"); } },
-      "← " + t("back"));
-    root.appendChild(renderTopbar(user, { extra: [wsIndicator(), backBtn] }));
+      iconArrowLeft(), t("back"));
+    root.appendChild(renderTopbar(user, { extra: wsIndicator() }));
 
     const container = el("div", { class: "container" });
+    container.appendChild(backBtn);
     container.appendChild(el("div", { class: "row", style: { justifyContent: "space-between", marginBottom: "0.5rem" } },
       el("h2", { style: { margin: 0 } },
         state.competition.name,
diff --git a/web/style.css b/web/style.css
index 6426ea6..e294abc 100644
--- a/web/style.css
+++ b/web/style.css
@@ -403,6 +403,16 @@ tbody tr.transferred { background: #f3f6fb; }
    unused descender space, so its glyphs sit above the flex centre line. */
 .ws-indicator .connection-status { position: relative; top: 1px; }
 
+.btn-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-bottom: 0.75rem;
+  padding-left: 0.3rem;
+}
+.icon { display: inline-flex; }
+.icon svg { display: block; }
+
 textarea { resize: vertical; min-height: 60px; }
 
 @media (max-width: 700px) {