From 512c565f544e39e047c0d1490fbc113e067224ce Mon Sep 17 00:00:00 2001
From: Danny <dth@taiga.ai>
Date: Sat, 18 Apr 2026 18:46:24 +0200
Subject: [PATCH] ui(webapp): move next-exercise input to bottom of
 add-exercise card

The empty "Exercise name" field above the current exercise's sets
felt counter-intuitive. Putting it below the sets reads naturally:
current exercise on top, prompt to start the next one at the bottom.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 webapp/index.html | 12 ++++++------
 webapp/style.css  |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/webapp/index.html b/webapp/index.html
index 540e7aa..ccd69c4 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -29,12 +29,6 @@
 
       <!-- Add exercise form -->
       <div class="card" id="add-exercise-card">
-        <div class="exercise-name-row">
-          <input type="text" id="inp-exercise-name" class="input" placeholder="Exercise name" autocomplete="off" />
-          <button id="btn-add-exercise" class="btn-icon" title="Add exercise">+</button>
-        </div>
-        <div id="autocomplete-list" class="autocomplete-list"></div>
-
         <!-- Sets for current exercise (shown after name is entered) -->
         <div id="sets-section" class="sets-section hidden">
           <div class="sets-header">
@@ -49,6 +43,12 @@
             <button id="btn-add-set" class="btn-icon" title="Add set">+</button>
           </div>
         </div>
+
+        <div class="exercise-name-row">
+          <input type="text" id="inp-exercise-name" class="input" placeholder="Exercise name" autocomplete="off" />
+          <button id="btn-add-exercise" class="btn-icon" title="Add exercise">+</button>
+        </div>
+        <div id="autocomplete-list" class="autocomplete-list"></div>
       </div>
 
       <!-- Notes -->
diff --git a/webapp/style.css b/webapp/style.css
index b7796b8..9145206 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -166,7 +166,7 @@ body {
 .exercise-name-row {
   display: flex;
   gap: 8px;
-  margin-bottom: 4px;
+  margin-top: 4px;
 }
 
 .exercise-name-row .input { flex: 1; }