feat: add FormNumberStepper to medication edit forms (#274)

Replace plain numeric inputs with a reusable +/− stepper component in
both desktop (MedicationsPage) and mobile (MobileEditModal) edit forms.

Applied to Stock, Schedule, and Prescription tab fields. Reorder tabs
so Schedule appears before Prescription. Add responsive grid overrides
for narrow sidebar and compact schedule rows.

Fix label-hover ghost activation by placing <input> first in DOM
(CSS order restores visual [−] [value] [+] layout).

Closes #273
This commit is contained in:
Daniel Volz
2026-02-22 16:49:51 +01:00
committed by GitHub
parent 5d657558f7
commit 33c1095e77
6 changed files with 382 additions and 119 deletions
+20 -5
View File
@@ -1127,11 +1127,15 @@ body.modal-open {
}
.blister-row .blister-inputs {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(10.75rem, 1fr) minmax(7.25rem, 0.8fr);
gap: 0.75rem;
align-items: end;
}
.blister-row .blister-inputs > label {
min-width: 0;
}
.blister-row .blister-inputs label.taken-by-field {
grid-column: span 2;
}
@@ -1154,6 +1158,17 @@ body.modal-open {
}
}
/* Desktop edit sidebar can be narrow; avoid clipping right-side controls. */
@media (min-width: 769px) {
.edit-sidebar .blister-row .blister-inputs {
grid-template-columns: 1fr 1fr;
}
.edit-sidebar .blister-row .blister-inputs label.taken-by-field {
grid-column: 1 / -1;
}
}
.gap {
gap: 0.6rem;
}
@@ -3376,7 +3391,7 @@ button.has-validation-error {
transition:
opacity 0.15s,
visibility 0.15s;
z-index: 100;
z-index: 1100;
pointer-events: none;
}
@@ -3394,7 +3409,7 @@ button.has-validation-error {
transition:
opacity 0.15s,
visibility 0.15s;
z-index: 101;
z-index: 1101;
}
/* Tooltip aligned to left edge of icon (prevents clipping inside modals) */
@@ -4335,7 +4350,7 @@ button.has-validation-error {
overscroll-behavior: contain;
display: flex;
flex-direction: column;
overflow: hidden;
overflow: visible;
}
.med-detail-modal .med-detail-body {
@@ -4701,7 +4716,7 @@ button.has-validation-error {
background: var(--bg-primary);
border-radius: 0 0 12px 12px;
flex-shrink: 0;
overflow: hidden;
overflow: visible;
position: relative;
z-index: 1;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));