From bd579546f7049e5a8b33cb5de284b8b5357c7060 Mon Sep 17 00:00:00 2001
From: Clawd <clawd@homelab.local>
Date: Mon, 16 Feb 2026 08:21:26 +0100
Subject: [PATCH] feat(01-02): integrate WeightInput and RepsInput into
 ExerciseCard set rows

- Import WeightInput and RepsInput in WorkoutPage.jsx
- Replace bare <input type="number"> elements with stepper components
- Update .set-inputs alignment to flex-start for taller steppers
- Update .set-row alignment to flex-start
- Remove now-redundant .weight-input and .reps-input CSS rules (main + mobile)
---
 frontend/src/App.css               | 28 +++-------------------------
 frontend/src/pages/WorkoutPage.jsx | 18 ++++++------------
 2 files changed, 9 insertions(+), 37 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index f190345..1444aa9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -281,7 +281,7 @@
 
 .set-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.75rem;
   padding: 0.75rem;
   background: var(--bg-secondary);
@@ -303,25 +303,8 @@
 .set-inputs {
   flex: 1;
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.weight-input,
-.reps-input {
-  width: 70px;
-  padding: 0.6rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-size: 1rem;
-  text-align: center;
-}
-
-.weight-input:focus,
-.reps-input:focus {
-  border-color: var(--accent);
+  align-items: flex-start;
+  gap: 0.75rem;
 }
 
 .input-separator {
@@ -362,11 +345,6 @@
     padding: 0.75rem;
   }
   
-  .weight-input,
-  .reps-input {
-    width: 60px;
-    padding: 0.5rem;
-  }
 }
 
 /* Safe area for notched phones */
diff --git a/frontend/src/pages/WorkoutPage.jsx b/frontend/src/pages/WorkoutPage.jsx
index e9789d6..f5c1c65 100644
--- a/frontend/src/pages/WorkoutPage.jsx
+++ b/frontend/src/pages/WorkoutPage.jsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Icon } from '../components/Icons'
+import WeightInput from '../components/WeightInput'
+import RepsInput from '../components/RepsInput'
 
 // Uppvärmningsövningar baserat på muskelgrupp
 const warmupExercises = {
@@ -324,22 +326,14 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
                 <div key={setNum} className={`set-row ${input.completed ? 'completed' : ''}`}>
                   <span className="set-number">Set {setNum}</span>
                   <div className="set-inputs">
-                    <input
-                      type="number"
-                      placeholder="kg"
+                    <WeightInput
                       value={input.weight}
-                      onChange={(e) => handleInputChange(setNum, 'weight', e.target.value)}
-                      className="weight-input"
-                      inputMode="decimal"
+                      onChange={(val) => handleInputChange(setNum, 'weight', val)}
                     />
                     <span className="input-separator">×</span>
-                    <input
-                      type="number"
-                      placeholder="reps"
+                    <RepsInput
                       value={input.reps}
-                      onChange={(e) => handleInputChange(setNum, 'reps', e.target.value)}
-                      className="reps-input"
-                      inputMode="numeric"
+                      onChange={(val) => handleInputChange(setNum, 'reps', val)}
                     />
                   </div>
                   <button