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:
+20
-5
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user