From 259f00e7a07af11468d32aaa779d9323169ef78a Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sun, 22 Feb 2026 17:57:36 +0100
Subject: [PATCH] fix: unify number stepper layout and detail modal padding
 (#279)

Reorder stepper DOM elements (input first) and apply refill-number-stepper
class to both steppers for consistent CSS order-based layout.
Fix missing bottom padding on .med-detail-body.
---
 frontend/src/components/MedDetailModal.tsx   | 36 ++++++++++----------
 frontend/src/styles.css                      |  2 +-
 frontend/src/styles/medication-workflows.css |  6 ++--
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/MedDetailModal.tsx b/frontend/src/components/MedDetailModal.tsx
index d29bfc9..d401943 100644
--- a/frontend/src/components/MedDetailModal.tsx
+++ b/frontend/src/components/MedDetailModal.tsx
@@ -275,6 +275,14 @@ export function MedDetailModal({
 
 		return (
 			<div className="number-stepper refill-number-stepper">
+				<input
+					type="number"
+					min={min}
+					max={max}
+					value={value}
+					onChange={(e) => onChange(e.target.value)}
+					onBlur={onBlur}
+				/>
 				<button
 					type="button"
 					className="stepper-btn decrement"
@@ -284,14 +292,6 @@ export function MedDetailModal({
 				>
 					<Minus size={16} aria-hidden="true" />
 				</button>
-				<input
-					type="number"
-					min={min}
-					max={max}
-					value={value}
-					onChange={(e) => onChange(e.target.value)}
-					onBlur={onBlur}
-				/>
 				<button
 					type="button"
 					className="stepper-btn increment"
@@ -321,16 +321,7 @@ export function MedDetailModal({
 		const canIncrement = clamped < max;
 
 		return (
-			<div className="number-stepper">
-				<button
-					type="button"
-					className="stepper-btn decrement"
-					onClick={() => onChange(Math.max(min, clamped - 1))}
-					disabled={!canDecrement}
-					aria-label={decrementLabel}
-				>
-					<Minus size={16} aria-hidden="true" />
-				</button>
+			<div className="number-stepper refill-number-stepper">
 				<input
 					type="number"
 					min={min}
@@ -341,6 +332,15 @@ export function MedDetailModal({
 						onChange(Number.isNaN(parsed) ? min : Math.min(max, Math.max(min, parsed)));
 					}}
 				/>
+				<button
+					type="button"
+					className="stepper-btn decrement"
+					onClick={() => onChange(Math.max(min, clamped - 1))}
+					disabled={!canDecrement}
+					aria-label={decrementLabel}
+				>
+					<Minus size={16} aria-hidden="true" />
+				</button>
 				<button
 					type="button"
 					className="stepper-btn increment"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cdfb96d..91986a7 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -4549,7 +4549,7 @@ button.has-validation-error {
 }
 
 .med-detail-body {
-	padding: 1.5rem 2rem 0;
+	padding: 1.5rem 2rem 2rem;
 	background: var(--bg-primary);
 }
 
diff --git a/frontend/src/styles/medication-workflows.css b/frontend/src/styles/medication-workflows.css
index df38bae..67f7aaa 100644
--- a/frontend/src/styles/medication-workflows.css
+++ b/frontend/src/styles/medication-workflows.css
@@ -446,7 +446,7 @@
 }
 
 .refill-number-stepper input {
-	order: initial;
+	order: 0;
 	text-align: center;
 	padding: 0.75rem 0.5rem;
 }
@@ -460,13 +460,13 @@
 }
 
 .refill-number-stepper .stepper-btn.decrement {
-	order: initial;
+	order: -1;
 	background: color-mix(in srgb, var(--danger) 22%, var(--bg-tertiary));
 	color: var(--danger);
 }
 
 .refill-number-stepper .stepper-btn.increment {
-	order: initial;
+	order: 1;
 	border-right: none;
 	border-left: 1px solid var(--border-primary);
 	background: color-mix(in srgb, var(--success) 22%, var(--bg-tertiary));