diff --git a/web/src/pages/ProductForm.jsx b/web/src/pages/ProductForm.jsx index 9359de7..058e58d 100644 --- a/web/src/pages/ProductForm.jsx +++ b/web/src/pages/ProductForm.jsx @@ -278,7 +278,7 @@ export default function ProductForm() { set("min_stock", e.target.value)} disabled={readOnly} placeholder="z.B. 2" /> setDraft({ ...draft, quantity: e.target.value })} - style={{ maxWidth: 90, marginTop: 0 }} /> + style={{ marginTop: 0 }} /> {pkgSize > 0 ? ( @@ -449,7 +454,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha {editing ? ( setDraft({ ...draft, best_before: e.target.value })} - style={{ maxWidth: 150, marginTop: 0 }} /> + style={{ marginTop: 0, minWidth: 150 }} /> ) : ( <> {l.best_before || "–"} diff --git a/web/src/styles.css b/web/src/styles.css index c11166d..6754739 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -153,8 +153,13 @@ input::placeholder { color: var(--muted); opacity: 0.7; } .field-inline > label { margin-bottom: 0; } /* Verschachtelt in einem Label (z.B. Menge + Einheit) traegt das Label den Abstand. */ label .field-inline { margin-bottom: 0; } -/* In Tabellenzellen (z.B. Chargen-Aktionen) keinen zusaetzlichen Abstand. */ -td .field-inline { margin-bottom: 0; } +/* In Tabellenzellen (z.B. Chargen-Aktionen) keinen zusaetzlichen Abstand; + bei wenig Platz lieber umbrechen als die Felder zusammenquetschen. */ +td .field-inline { margin-bottom: 0; flex-wrap: wrap; } +/* Eingaben haben global width:100% und wuerden im Flex-Layout zusammenschrumpfen. + Zahlenfelder duerfen wachsen, Einheiten-Dropdowns behalten ihre Textbreite. */ +.field-inline > input { flex: 1 1 auto; min-width: 78px; } +.field-inline > select { flex: 0 0 auto; width: auto; min-width: 132px; } /* ---------- Buttons ---------- */ .btn {