From 8bc8b801dc1916bca7cc14bcce9ffbb594c0a1f3 Mon Sep 17 00:00:00 2001
From: Michael Pilosov <consistentbayes@gmail.com>
Date: Wed, 22 Apr 2026 14:32:32 -0600
Subject: [PATCH] compare: move control bar above the panels

---
 app/web/templates/compare.html | 64 +++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/app/web/templates/compare.html b/app/web/templates/compare.html
index 0248110..ff8c527 100644
--- a/app/web/templates/compare.html
+++ b/app/web/templates/compare.html
@@ -37,38 +37,6 @@
 <section class="compare-layout" id="compare-layout"
          data-stem-a="{{ stem_a }}" data-stem-b="{{ stem_b }}">
 
-  <div class="compare-grid">
-    <article class="compare-panel" data-slot="a">
-      <header class="compare-panel-head">
-        <span class="panel-tag" data-role="label">A</span>
-        <span class="panel-embedder" data-role="embedder">&hellip;</span>
-        <span class="panel-sep">&middot;</span>
-        <span class="panel-generator" data-role="generator">&hellip;</span>
-        <span class="panel-params" data-role="params">loading&hellip;</span>
-        <a class="panel-stem" data-role="stem-link"
-           href="/api/runs/{{ stem_a }}/frames.json" target="_blank">{{ stem_a }}</a>
-      </header>
-      <div class="compare-canvas" data-role="canvas">
-        <div class="compare-status" data-role="status">loading&hellip;</div>
-      </div>
-    </article>
-
-    <article class="compare-panel" data-slot="b">
-      <header class="compare-panel-head">
-        <span class="panel-tag" data-role="label">B</span>
-        <span class="panel-embedder" data-role="embedder">&hellip;</span>
-        <span class="panel-sep">&middot;</span>
-        <span class="panel-generator" data-role="generator">&hellip;</span>
-        <span class="panel-params" data-role="params">loading&hellip;</span>
-        <a class="panel-stem" data-role="stem-link"
-           href="/api/runs/{{ stem_b }}/frames.json" target="_blank">{{ stem_b }}</a>
-      </header>
-      <div class="compare-canvas" data-role="canvas">
-        <div class="compare-status" data-role="status">loading&hellip;</div>
-      </div>
-    </article>
-  </div>
-
   <div class="compare-controls" id="compare-controls">
     <button type="button" class="cc-play" id="cc-play" aria-label="play / pause">&#9654;</button>
 
@@ -108,6 +76,38 @@
     </label>
   </div>
 
+  <div class="compare-grid">
+    <article class="compare-panel" data-slot="a">
+      <header class="compare-panel-head">
+        <span class="panel-tag" data-role="label">A</span>
+        <span class="panel-embedder" data-role="embedder">&hellip;</span>
+        <span class="panel-sep">&middot;</span>
+        <span class="panel-generator" data-role="generator">&hellip;</span>
+        <span class="panel-params" data-role="params">loading&hellip;</span>
+        <a class="panel-stem" data-role="stem-link"
+           href="/api/runs/{{ stem_a }}/frames.json" target="_blank">{{ stem_a }}</a>
+      </header>
+      <div class="compare-canvas" data-role="canvas">
+        <div class="compare-status" data-role="status">loading&hellip;</div>
+      </div>
+    </article>
+
+    <article class="compare-panel" data-slot="b">
+      <header class="compare-panel-head">
+        <span class="panel-tag" data-role="label">B</span>
+        <span class="panel-embedder" data-role="embedder">&hellip;</span>
+        <span class="panel-sep">&middot;</span>
+        <span class="panel-generator" data-role="generator">&hellip;</span>
+        <span class="panel-params" data-role="params">loading&hellip;</span>
+        <a class="panel-stem" data-role="stem-link"
+           href="/api/runs/{{ stem_b }}/frames.json" target="_blank">{{ stem_b }}</a>
+      </header>
+      <div class="compare-canvas" data-role="canvas">
+        <div class="compare-status" data-role="status">loading&hellip;</div>
+      </div>
+    </article>
+  </div>
+
 </section>
 
 <script src="/static/theme.js?v=11"></script>