Fix iPhone workout layout: make action buttons visible

src/components/workouts/SetLogger.css

@@ -57,55 +57,28 @@
   justify-content: center;
 }
 
-.weight-input-group {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  background: white;
+.weight-input {
+  width: 80px;
+  text-align: center;
+  padding: 0.5rem;
   border: 2px solid #e5e7eb;
   border-radius: 6px;
-  padding: 0.25rem;
-}
-
-.set-logger.completed .weight-input-group {
-  border-color: #d1fae5;
-  background: #f0fdf4;
-}
-
-.weight-btn {
-  padding: 0.25rem 0.5rem;
-  background: #f3f4f6;
-  border: none;
-  border-radius: 4px;
-  font-size: 0.75rem;
   font-weight: 600;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  min-width: 44px;
-  /* Ensure touch target for mobile gym use */
+  font-size: 1rem;
+  background: white;
+  transition: all 0.2s ease;
+  /* Ensure touch target */
   min-height: 44px;
 }
 
-.weight-btn:hover:not(:disabled) {
-  background: #e5e7eb;
-  color: #374151;
-}
-
-.weight-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.weight-input:focus {
+  outline: none;
+  border-color: #3b82f6;
 }
 
-.weight-input {
-  width: 70px;
-  text-align: center;
-  border: none;
-  background: transparent;
-  font-weight: 600;
-  font-size: 1rem;
-  /* Ensure touch target */
-  min-height: 44px;
+.set-logger.completed .weight-input {
+  border-color: #d1fae5;
+  background: #f0fdf4;
 }
 
 /* Reps Input */
@@ -266,53 +239,45 @@
 /* Mobile Responsive */
 @media (max-width: 640px) {
   .set-logger {
-    grid-template-columns: 40px 70px 1fr 70px 50px 70px;
+    grid-template-columns: 28px 1fr 60px 44px 80px;
     gap: 0.25rem;
-    padding: 0.5rem;
+    padding: 0.5rem 0.25rem;
   }
 
   .set-number {
-    width: 2rem;
-    height: 2rem;
-    font-size: 0.8125rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.6875rem;
   }
 
   .set-previous {
-    font-size: 0.75rem;
-  }
-
-  .weight-btn {
-    /* Keep 44px minimum for proper touch targets */
-    min-width: 44px;
-    min-height: 44px;
-    font-size: 0.6875rem;
-    padding: 0.25rem 0.375rem;
+    display: none; /* Hide on small screens to save space */
   }
 
   .weight-input {
-    width: 55px;
+    width: 100%;
     font-size: 0.875rem;
     min-height: 44px;
   }
 
   .reps-input {
-    width: 50px;
+    width: 56px;
     font-size: 0.875rem;
-    padding: 0.375rem;
+    padding: 0.3rem;
     min-height: 44px;
   }
 
   .rir-input {
     width: 40px;
     font-size: 0.875rem;
-    padding: 0.375rem;
+    padding: 0.3rem;
     min-height: 44px;
   }
 
   .btn-add-rir {
     min-width: 44px;
     min-height: 44px;
-    font-size: 1rem;
+    font-size: 0.9375rem;
   }
 
   .btn-complete-set,
@@ -322,6 +287,10 @@
     min-height: 44px;
     font-size: 0.875rem;
   }
+
+  .set-actions {
+    gap: 0.25rem;
+  }
 }
 
 /* Large Screen */
@@ -332,7 +301,7 @@
   }
 
   .weight-input {
-    width: 80px;
+    width: 100px;
   }
 
   .reps-input {
@@ -342,9 +311,4 @@
   .rir-input {
     width: 60px;
   }
-
-  .weight-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
 }

src/components/workouts/SetLogger.tsx

@@ -31,10 +31,6 @@ export default function SetLogger({
     onUpdate({ weight });
   };
 
-  const handleWeightIncrement = (amount: number) => {
-    onUpdate({ weight: Math.max(0, set.weight + amount) });
-  };
-
   const handleRepsChange = (value: string) => {
     const reps = parseInt(value) || 0;
     onUpdate({ actualReps: reps });
@@ -82,35 +78,17 @@ export default function SetLogger({
       </div>
 
       <div className="set-weight">
-        <div className="weight-input-group">
-          <button
-            onClick={() => handleWeightIncrement(-2.5)}
-            className="weight-btn weight-btn-decrement"
-            disabled={set.completed}
-            aria-label="Decrease weight by 2.5"
-          >
-            -2.5
-          </button>
-          <input
-            type="number"
-            value={set.weight || ''}
-            onChange={(e) => handleWeightChange(e.target.value)}
-            placeholder="0"
-            className="set-input weight-input"
-            disabled={set.completed}
-            inputMode="decimal"
-            step="0.5"
-            aria-label={`Weight for set ${setNumber}`}
-          />
-          <button
-            onClick={() => handleWeightIncrement(2.5)}
-            className="weight-btn weight-btn-increment"
-            disabled={set.completed}
-            aria-label="Increase weight by 2.5"
-          >
-            +2.5
-          </button>
-        </div>
+        <input
+          type="number"
+          value={set.weight || ''}
+          onChange={(e) => handleWeightChange(e.target.value)}
+          placeholder="0"
+          className="set-input weight-input"
+          disabled={set.completed}
+          inputMode="decimal"
+          step="2.5"
+          aria-label={`Weight for set ${setNumber}`}
+        />
       </div>
 
       <div className="set-reps">

src/components/workouts/WorkoutExerciseCard.css

@@ -151,12 +151,17 @@
   }
 
   .sets-header {
-    grid-template-columns: 40px 70px 1fr 70px 50px 70px;
-    font-size: 0.6875rem;
-    padding: 0.375rem;
+    grid-template-columns: 28px minmax(95px, 1fr) 52px 44px 80px;
+    font-size: 0.625rem;
+    padding: 0.375rem 0.25rem;
     gap: 0.25rem;
   }
 
+  /* Hide "Previous" column header on small screens */
+  .sets-header .set-col-header:nth-child(2) {
+    display: none;
+  }
+
   .btn-add-set {
     padding: 0.625rem;
     font-size: 0.875rem;