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:
Scarriffle
2026-07-22 12:41:54 +02:00
parent 0310cdfbd6
commit 6960f9e28d
2 changed files with 17 additions and 2 deletions

View File

@@ -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>

View File

@@ -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 {