From 8e9a2b720854041ec22e19c140cb9a4990cb2b1e Mon Sep 17 00:00:00 2001
From: Danny <dth@taiga.ai>
Date: Sat, 18 Apr 2026 18:52:26 +0200
Subject: [PATCH] ui(webapp): split current exercise and next-exercise input
 into separate cards

The two concerns sharing one gray block felt crowded. Giving the
next-exercise input its own card creates clear visual separation
and a natural "what comes next" feel.

Drop the now-redundant top-border/padding on .sets-section since
it's its own card now.

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

diff --git a/webapp/index.html b/webapp/index.html
index ccd69c4..cffdd21 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -27,23 +27,23 @@
       <!-- Current workout exercises list -->
       <div id="workout-exercises"></div>
 
-      <!-- Add exercise form -->
-      <div class="card" id="add-exercise-card">
-        <!-- Sets for current exercise (shown after name is entered) -->
-        <div id="sets-section" class="sets-section hidden">
-          <div class="sets-header">
-            <div class="section-label" id="sets-label">Sets</div>
-            <button id="btn-delete-exercise" class="btn-link btn-danger hidden">Remove exercise</button>
-          </div>
-          <div id="sets-list"></div>
-          <div class="set-input-row">
-            <input type="text" id="inp-reps" class="input input-small" placeholder="Reps" inputmode="numeric" pattern="[0-9]*" />
-            <span class="set-separator">x</span>
-            <input type="text" id="inp-weight" class="input input-small" placeholder="kg" inputmode="decimal" />
-            <button id="btn-add-set" class="btn-icon" title="Add set">+</button>
-          </div>
+      <!-- Current exercise card (visible after name is entered) -->
+      <div id="sets-section" class="card sets-section hidden">
+        <div class="sets-header">
+          <div class="section-label" id="sets-label">Sets</div>
+          <button id="btn-delete-exercise" class="btn-link btn-danger hidden">Remove exercise</button>
         </div>
+        <div id="sets-list"></div>
+        <div class="set-input-row">
+          <input type="text" id="inp-reps" class="input input-small" placeholder="Reps" inputmode="numeric" pattern="[0-9]*" />
+          <span class="set-separator">x</span>
+          <input type="text" id="inp-weight" class="input input-small" placeholder="kg" inputmode="decimal" />
+          <button id="btn-add-set" class="btn-icon" title="Add set">+</button>
+        </div>
+      </div>
 
+      <!-- Add next exercise -->
+      <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>
diff --git a/webapp/style.css b/webapp/style.css
index 9145206..fa4dc12 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -166,7 +166,6 @@ body {
 .exercise-name-row {
   display: flex;
   gap: 8px;
-  margin-top: 4px;
 }
 
 .exercise-name-row .input { flex: 1; }
@@ -201,11 +200,7 @@ body {
 
 /* ── Sets section ────────────────────────────────────────────── */
 
-.sets-section {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--tg-theme-hint-color, #999)22;
-}
+/* .sets-section inherits .card styling; no additional rules needed. */
 
 .sets-header {
   display: flex;