From e4e22c78220780476f487c747f60cbf2862e3368 Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Thu, 23 Jul 2026 07:59:52 +0200
Subject: [PATCH] Karten-Darstellung der Tabellen entzerrt, Erklaerungen als
 Tooltip

Tabellen (Uebersicht, Einheiten, Kategorien):
Wird der Container schmal, stellen sich Tabellen auf Karten um. Dort trennte
"space-between" Beschriftung und Wert an die beiden Zeilenenden - der Wert stand
weit rechts und wirkte durch die unterschiedlichen Zeilenhoehen nicht auf einer
Linie. Jetzt zwei feste Spalten (Beschriftung, Wert direkt daneben) mit
Ausrichtung an der Schriftlinie. Zahlenspalten stehen in der Karte linksbuendig.

Artikelseite:
Die Erklaerungen unter "MHD-Angabe", "Gruppe" und "Kategorie" standen dauerhaft
im Formular und machten es lang. Sie haengen jetzt als Tooltip an der
Beschriftung; eine gepunktete Linie zeigt an, dass dort eine Erklaerung steht.
(Kategorie hatte denselben Text-Block - der Einheitlichkeit halber mit
umgestellt.)

Geprueft: "npm run build" laeuft durch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/pages/ProductForm.jsx | 22 +++++++++-------------
 web/src/pages/Products.jsx    |  2 +-
 web/src/styles.css            | 19 +++++++++++++++----
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/web/src/pages/ProductForm.jsx b/web/src/pages/ProductForm.jsx
index f67d91e..9674877 100644
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -315,15 +315,14 @@ export default function ProductForm() {
               </select>
             </label>
             <label className="grow">
-              MHD-Angabe
+              <span className="tip" title="Voreinstellung beim Einlagern – z.B. Konserven tragen oft nur „09/2026“.">
+                MHD-Angabe
+              </span>
               <select value={form.date_precision} onChange={(e) => set("date_precision", e.target.value)}
                 disabled={readOnly}>
                 <option value="day">Tagesdatum</option>
                 <option value="month">nur Monat/Jahr</option>
               </select>
-              <span className="muted small">
-                Voreinstellung beim Einlagern – z.B. Konserven tragen oft nur „09/2026“.
-              </span>
             </label>
           </div>
           <div className="row">
@@ -346,20 +345,20 @@ export default function ProductForm() {
               </div>
             </label>
             <label className="grow">
-              Gruppe
+              <span className="tip" title="Zählt Bestände mehrerer Marken zusammen. Der EAN-Code dieses Artikels erscheint danach automatisch bei der Gruppe.">
+                Gruppe
+              </span>
               <select value={form.group_id} onChange={(e) => set("group_id", e.target.value)} disabled={readOnly}>
                 <option value="">– keine –</option>
                 {groups.map((g) => <option key={g.id} value={g.id}>{g.name}</option>)}
               </select>
-              <span className="muted small">
-                Zählt Bestände mehrerer Marken zusammen. Der EAN-Code dieses Artikels
-                erscheint danach automatisch bei der Gruppe.
-              </span>
             </label>
           </div>
           <div className="row">
             <label className="grow">
-              Kategorie
+              <span className="tip" title="Nur für den Überblick in der Artikelliste – ohne Einfluss auf Bestände.">
+                Kategorie
+              </span>
               <select value={form.category_id} onChange={(e) => set("category_id", e.target.value)}
                 disabled={readOnly}>
                 <option value="">– keine –</option>
@@ -367,9 +366,6 @@ export default function ProductForm() {
                   <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
                 ))}
               </select>
-              <span className="muted small">
-                Nur für den Überblick in der Artikelliste – ohne Einfluss auf Bestände.
-              </span>
             </label>
             <div className="grow" />
           </div>
diff --git a/web/src/pages/Products.jsx b/web/src/pages/Products.jsx
index 9ed6906..84856a8 100644
--- a/web/src/pages/Products.jsx
+++ b/web/src/pages/Products.jsx
@@ -121,7 +121,7 @@ export default function Products() {
                       {fmt(p.stock / (p.unit_factor || 1))} {p.unit_name || unitShort(p.base_unit)}
                     </td>
                     <td data-label="Einheiten" className="num">
-                      <span className="cell-row" style={{ justifyContent: "flex-end" }}>
+                      <span className="cell-row">
                         <span>
                           {fmt(p.stock / unitCount(p))}
                           {p.min_stock != null ? ` / ${fmt(p.min_stock / unitCount(p))}` : ""}{" "}
diff --git a/web/src/styles.css b/web/src/styles.css
index 6b63ae2..7c874d4 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -266,6 +266,11 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 /* Zelle mit Eingabe plus Kennzeichen (z.B. "niedrig"): eine Zeile, damit das
    Kennzeichen immer an derselben Stelle sitzt statt mal darunter zu rutschen. */
 .cell-row { display: flex; align-items: center; gap: 6px; }
+/* Beschriftung mit Erklaerung im Tooltip: die gepunktete Linie zeigt an, dass
+   dort etwas steht - so bleibt das Formular kurz, ohne Wissen zu verstecken. */
+.tip { border-bottom: 1px dotted var(--border-strong); cursor: help; }
+/* In Zahlenspalten sitzt der Inhalt rechts, passend zur Ausrichtung der Spalte. */
+.table td.num .cell-row { justify-content: flex-end; }
 .table tbody tr:last-child td { border-bottom: none; }
 .table tbody tr:hover { background: var(--surface-2); }
 .num { text-align: right; font-variant-numeric: tabular-nums; }
@@ -357,21 +362,27 @@ td select { width: auto; min-width: 0; max-width: 100%; }
     padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
     background: var(--surface);
   }
+  /* Zwei feste Spalten statt "space-between": Beschriftung links, Wert direkt
+     daneben. Vorher wurde der Wert an den rechten Rand geschoben, wodurch
+     Beschriftung und Wert weit auseinanderstanden und die Zeile unruhig wirkte. */
   .table td {
-    border: none; padding: 5px 0;
-    display: flex; align-items: center; justify-content: space-between;
+    border: none; padding: 4px 0;
+    display: grid;
+    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
+    align-items: baseline;
     gap: var(--sp-3); text-align: left;
   }
   .table td::before {
     content: attr(data-label);
-    flex: 0 0 auto;
     color: var(--muted); font-size: 0.7rem; font-weight: 600;
     text-transform: uppercase; letter-spacing: 0.05em;
   }
   /* Zellen ohne Beschriftung (Bild, Aktionen) brauchen keine Zeile fuer sich. */
   .table td:not([data-label])::before { content: none; }
-  .table td:not([data-label]) { justify-content: flex-end; }
+  .table td:not([data-label]) { display: flex; justify-content: flex-end; }
+  /* In der Karte stehen auch Zahlen linksbuendig am Wert-Rand. */
   .table td.num { text-align: left; }
+  .table td.num .cell-row { justify-content: flex-start; }
   .table td input, .table td select { width: auto; max-width: 60%; margin-top: 0; }
   .table .empty { text-align: center; }
   /* Reine Nachschlagelisten (Begriff -> Erklaerung) bleiben zweispaltig,