UI-Feinschliff: Button-Ausrichtung in Inline-Reihen + Einheit beim Mindestbestand
- .field-inline: Labels ohne eigenen margin-bottom, sonst rutschen daneben stehende Buttons (z.B. "Nachschlagen") optisch nach unten. Abstand traegt jetzt die Reihe selbst; verschachtelt in Label/Tabellenzelle bleibt er aus. - Produkttabelle: Mindestbestand wird in der Produkteinheit mit nachgestellter Einheit angezeigt (zusaetzlich der Packungswert, falls Packungsgroesse gesetzt). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -98,7 +98,15 @@ export default function Products() {
|
||||
: `${fmt(p.stock / (p.unit_factor || 1))} ${p.unit_name || unitShort(p.base_unit)}`}
|
||||
</td>
|
||||
<td className="num muted">
|
||||
{p.min_stock != null ? `${fmt(p.min_stock / (p.unit_factor || 1))}` : "–"}
|
||||
{p.min_stock != null ? (
|
||||
<>
|
||||
{fmt(p.min_stock / (p.unit_factor || 1))}{" "}
|
||||
{p.unit_name || unitShort(p.base_unit)}
|
||||
{p.package_size ? (
|
||||
<span className="small"> · {fmt(p.min_stock / p.package_size)} Pkg</span>
|
||||
) : null}
|
||||
</>
|
||||
) : "–"}
|
||||
</td>
|
||||
<td className="num"><Link to={`/products/${p.id}`}>Details</Link></td>
|
||||
</tr>
|
||||
|
||||
@@ -147,7 +147,14 @@ input:focus, select:focus {
|
||||
input::placeholder { color: var(--muted); opacity: 0.7; }
|
||||
.row { display: flex; gap: var(--sp-3); align-items: flex-start; }
|
||||
.row .grow { flex: 1; }
|
||||
.field-inline { display: flex; gap: var(--sp-2); align-items: flex-end; }
|
||||
.field-inline { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-4); }
|
||||
/* Labels in einer Inline-Reihe duerfen keinen eigenen Abstand haben, sonst
|
||||
rutschen daneben stehende Buttons optisch nach unten. */
|
||||
.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; }
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
.btn {
|
||||
|
||||
Reference in New Issue
Block a user