From 6960f9e28d775c0f27edd4353af8f35109fd058e Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Wed, 22 Jul 2026 12:41:54 +0200
Subject: [PATCH] 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>
---
 web/src/pages/Products.jsx | 10 +++++++++-
 web/src/styles.css         |  9 ++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Products.jsx b/web/src/pages/Products.jsx
index 0cf31e8..7a9c8ce 100644
--- a/web/src/pages/Products.jsx
+++ b/web/src/pages/Products.jsx
@@ -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>
diff --git a/web/src/styles.css b/web/src/styles.css
index 6364674..c11166d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -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 {