From 01c93d8b2cf3bc39dc6b13d64745fc4d97e7fdbc Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Sun, 16 Aug 2026 10:36:48 +0200
Subject: [PATCH] Web: Mindestbestaende in festen Spalten, Detail-Spalten
 verschiebbar

Die Eingabefelder auf der Mindestbestaende-Seite standen je Zeile woanders. Die
Zeile war ein .field-inline, und dort waechst sowohl der Name als auch das
Eingabefeld (.field-inline > input { flex: 1 1 auto }) - beide teilten sich den
Restplatz, also verschob ein laengerer Name das Feld nach rechts und machte es
schmaler. Jetzt ist die Zeile ein Raster mit festen Spalten (Name, Menge,
Einheit, Bestand, Ort, Loeschen); ohne Adminrechte bleiben die letzten beiden
Zellen leer, damit die Zeilen trotzdem fluchten. Schmale Fenster stellen den
Namen ueber die volle Breite.

Die "Details"-Spalte liess sich nicht verschieben: sie war fixed und hatte
zusaetzlich einen leeren Kopf - es gab also nichts zu greifen. Sie ist jetzt
frei und traegt einen sichtbaren Titel. Dasselbe fuer die gleichartigen
Link-Spalten in der Einzelstueck- und der Chargenliste ("Artikel",
"Aufteilen"). Sortieren bleibt dort aus, weil toggleSort ohne sortValue
ohnehin aussteigt. Bild- und Auswahlspalten bleiben fest - die haben keinen
sinnvollen Titel und gehoeren an den Anfang.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/pages/Charges.jsx  |  4 ++--
 web/src/pages/ItemList.jsx |  2 +-
 web/src/pages/MinStock.jsx | 21 ++++++++++++---------
 web/src/pages/Products.jsx |  4 +++-
 web/src/styles.css         | 20 ++++++++++++++++++++
 5 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/Charges.jsx b/web/src/pages/Charges.jsx
index ddcf528..b184aa4 100644
--- a/web/src/pages/Charges.jsx
+++ b/web/src/pages/Charges.jsx
@@ -139,12 +139,12 @@ export default function Charges() {
     { key: "created", header: "Eingelagert", width: 130,
       sortValue: (l) => new Date(l.created_at).getTime(),
       render: (l) => <span className="muted">{new Date(l.created_at).toLocaleDateString("de-DE")}</span> },
-    { key: "split", header: "", label: "Aufteilen", fixed: true, width: 118, align: "num",
+    { key: "split", header: "Aufteilen", label: "Aufteilen", width: 118, align: "num",
       render: (l) => (isAdmin ? (
         <button type="button" className="btn sm ghost" title="Charge aufteilen und Teil umlagern"
           onClick={() => setSplitting(l)}><Icon name="split" size={15} />Aufteilen</button>
       ) : null) },
-    { key: "details", header: "", label: "Artikel", fixed: true, width: 84, align: "num",
+    { key: "details", header: "Artikel", label: "Artikel", width: 90, align: "num",
       render: (l) => <Link to={`/products/${l.product_id}`}>Artikel</Link> },
   ];
 
diff --git a/web/src/pages/ItemList.jsx b/web/src/pages/ItemList.jsx
index 797caa2..d35f8cd 100644
--- a/web/src/pages/ItemList.jsx
+++ b/web/src/pages/ItemList.jsx
@@ -88,7 +88,7 @@ export default function ItemList() {
       render: (it) => preis(it) || "–" },
     { key: "note", header: "Notiz", width: 160, filterText: (it) => it.note || "",
       render: (it) => <span className="muted">{it.note || "–"}</span> },
-    { key: "open", header: "", label: "Produkt öffnen", fixed: true, width: 84, align: "num",
+    { key: "open", header: "Artikel", label: "Produkt öffnen", width: 90, align: "num",
       render: (it) => <Link to={`/products/${it.product_id}`}>Produkt</Link> },
   ];
 
diff --git a/web/src/pages/MinStock.jsx b/web/src/pages/MinStock.jsx
index 3e090bc..6b58d8d 100644
--- a/web/src/pages/MinStock.jsx
+++ b/web/src/pages/MinStock.jsx
@@ -259,8 +259,8 @@ export default function MinStock() {
   function zeile(r) {
     const g = r.kind === "group" ? r.entity : null;
     return (
-      <div className="field-inline" key={r.key} style={{ marginBottom: 0, alignItems: "center" }}>
-        <span className="grow" style={{ flex: "1 1 auto", minWidth: 0 }}>
+      <div className="min-zeile" key={r.key}>
+        <span className="name">
           <span className="strong">{r.name}</span>
           {g && <span className="badge accent" style={{ marginLeft: 6 }}>Gruppe</span>}
           {g?.child_ids?.length > 0 && (
@@ -272,21 +272,21 @@ export default function MinStock() {
         </span>
 
         {isAdmin ? (
-          <input type="number" step="any" min="0" style={{ marginTop: 0, width: 100 }}
+          <input type="number" step="any" min="0"
             key={r.soll ?? "none"} defaultValue={r.soll ?? ""}
             onBlur={(e) => saveSoll(r, e.target.value)} />
-        ) : <span style={{ width: 100 }}>{fmt(r.soll)}</span>}
+        ) : <span>{fmt(r.soll)}</span>}
 
         {/* Einheit: bei Packungsartikeln und Gruppen mit Einheit umschaltbar. */}
         {isAdmin && r.kind === "product" && hasPkg(r.entity) ? (
-          <select value={pkgMode(r.entity) ? "pkg" : "disp"} style={{ marginTop: 0, width: 130 }}
+          <select value={pkgMode(r.entity) ? "pkg" : "disp"}
             title="Einheit für den Mindestbestand umschalten"
             onChange={(e) => toggleProductUnit(r.entity, e.target.value === "pkg")}>
             <option value="disp">{dispLabel(r.entity)}</option>
             <option value="pkg">{r.entity.package_label || "Packung"}</option>
           </select>
         ) : isAdmin && g && g.min_stock_unit_id ? (
-          <select value={grpPkgMode(g) ? "pkg" : "unit"} style={{ marginTop: 0, width: 130 }}
+          <select value={grpPkgMode(g) ? "pkg" : "unit"}
             title="Einheit für den Mindestbestand umschalten"
             onChange={(e) => {
               const v = e.target.value;
@@ -299,16 +299,16 @@ export default function MinStock() {
             <option value="edit">{g.package_size > 0 ? "Gebinde ändern…" : "Gebinde festlegen…"}</option>
           </select>
         ) : (
-          <span className="muted small" style={{ width: 130 }}>{r.unit || "–"}</span>
+          <span className="muted small">{r.unit || "–"}</span>
         )}
 
-        <span className="muted small" style={{ width: 130, textAlign: "right" }}>
+        <span className="muted small bestand">
           {r.bestand != null ? `Bestand ${fmt(r.bestand)} ${r.bestandUnit || ""}` : ""}
         </span>
 
         {isAdmin && (
           <>
-            <select value={vonId(r.locId)} style={{ marginTop: 0, width: 150 }}
+            <select value={vonId(r.locId)}
               title="Ort ändern – der Mindestbestand wird verschoben"
               onChange={(e) => moveRow(r, e.target.value)}>
               <option value={UEBERALL}>Überall</option>
@@ -318,6 +318,9 @@ export default function MinStock() {
               onClick={() => deleteRow(r)}><Icon name="trash" size={15} /></button>
           </>
         )}
+        {/* Ohne Adminrechte bleiben die letzten beiden Spalten leer, damit die
+            Zeilen trotzdem fluchten. */}
+        {!isAdmin && (<><span /><span /></>)}
       </div>
     );
   }
diff --git a/web/src/pages/Products.jsx b/web/src/pages/Products.jsx
index b99758a..a004675 100644
--- a/web/src/pages/Products.jsx
+++ b/web/src/pages/Products.jsx
@@ -141,7 +141,9 @@ export default function Products({ fixedType = null }) {
       sortValue: (p) => (p.updated_at ? new Date(p.updated_at).getTime() : 0),
       filterText: (p) => fmtDateTime(p.updated_at),
       render: (p) => <span className="muted nowrap">{fmtDateTime(p.updated_at)}</span> },
-    { key: "details", header: "", label: "Details", fixed: true, width: 84, align: "num",
+    // Kein fixed: die Spalte soll sich verschieben lassen. Dafuer braucht sie
+    // einen sichtbaren Titel – an einem leeren Kopf gibt es nichts zu greifen.
+    { key: "details", header: "Details", label: "Details", width: 90, align: "num",
       render: (p) => <Link to={`/products/${p.id}`}>Details</Link> },
   ].filter(Boolean);
 
diff --git a/web/src/styles.css b/web/src/styles.css
index 3361295..acfaaa4 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -328,6 +328,26 @@ td .field-inline { margin-bottom: 0; flex-wrap: wrap; }
    132px machte schmale Spalten (z.B. "Einheit") unnoetig breit. */
 td select { width: auto; min-width: 0; max-width: 100%; }
 /* Button-Paare (z.B. Speichern/Abbrechen) gleich breit halten. */
+/* Mindestbestände: eine Zeile je Eintrag in FESTEN Spalten.
+   Vorher lag hier ein .field-inline – dort wachsen Name und Eingabefeld beide
+   (.field-inline > input { flex: 1 1 auto }) und teilen sich den Restplatz.
+   Die Felder standen dadurch je nach Namenslänge woanders. */
+.min-zeile {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 110px 150px 150px 160px 36px;
+  gap: var(--sp-2);
+  align-items: center;
+}
+.min-zeile > * { min-width: 0; }
+.min-zeile input, .min-zeile select { margin-top: 0; width: 100%; min-width: 0; }
+.min-zeile .bestand { text-align: right; }
+/* Schmal: Name über die volle Breite, darunter die Felder nebeneinander. */
+@media (max-width: 900px) {
+  .min-zeile { grid-template-columns: 1fr 1fr 1fr 36px; }
+  .min-zeile > .name { grid-column: 1 / -1; }
+  .min-zeile .bestand { text-align: left; }
+}
+
 .btn-pair { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
 .btn-pair .btn { flex: 1 1 auto; min-width: 104px; justify-content: center; }