From 8f5d679d9d9373cc6c2d07f1d1badbca201dc9ae Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Wed, 28 Oct 2026 20:23:50 +0100
Subject: [PATCH] Artikelseite: Einzelstuecke neben das Formular statt darunter

Bei einem Artikel mit Verwaltung "Einzelstuecke" blieb die rechte
Rasterspalte komplett leer - dort steht sonst der Bestand je Lagerort
bzw. die Chargen, und beides gibt es hier nicht. Die Einzelstueck-Tabelle
hing stattdessen unterhalb, man musste zu ihr erst scrollen, obwohl
daneben die halbe Seite frei war.

Jetzt fuellt sie genau diese Spalte. Die EAN-Codes bleiben unten, die
braucht man selten.

Das Raster und die volle Seitenbreite gab es bereits (grid-2
form-plus-table, Route mit "wide") - es wandert nur ein Block.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/pages/ProductForm.jsx | 45 ++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/web/src/pages/ProductForm.jsx b/web/src/pages/ProductForm.jsx
index 46a09c1..2f21ca5 100644
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -1135,36 +1135,37 @@ export default function ProductForm() {
             }}
             onError={setError}
           />
-        ) : (
-          // Gegenstand als Menge je Lagerort (Einzelstücke stehen unten).
-          product && !form.individual && (
-            <ObjektBestand
+        ) : product && (form.individual ? (
+          // Einzelstücke stehen NEBEN dem Formular, nicht darunter: Sie sind
+          // das, was man an so einem Artikel am häufigsten braucht. Unten
+          // müsste man erst scrollen – und die rechte Spalte bliebe leer, weil
+          // ein Einzelstück-Artikel keine Mengen je Lagerort führt.
+          isObject && (
+            <Einzelstuecke
               product={product}
-              lots={lots}
               locations={locations}
+              shops={shops}
               isAdmin={isAdmin}
-              onChanged={async () => {
-                setLots(await api.listLots(id));
-                setProduct(await api.getProduct(id));
-              }}
+              onChanged={async () => { setProduct(await api.getProduct(id)); }}
               onError={setError}
             />
           )
-        ))}
+        ) : (
+          // Gegenstand als Menge je Lagerort.
+          <ObjektBestand
+            product={product}
+            lots={lots}
+            locations={locations}
+            isAdmin={isAdmin}
+            onChanged={async () => {
+              setLots(await api.listLots(id));
+              setProduct(await api.getProduct(id));
+            }}
+            onError={setError}
+          />
+        )))}
       </div>
 
-      {/* Einzelstücke über die volle Breite – die Tabelle hat viele Spalten. */}
-      {!isNew && product && isObject && form.individual && (
-        <Einzelstuecke
-          product={product}
-          locations={locations}
-          shops={shops}
-          isAdmin={isAdmin}
-          onChanged={async () => { setProduct(await api.getProduct(id)); }}
-          onError={setError}
-        />
-      )}
-
       {/* Unterhalb der beiden Spalten: die Codes braucht man selten, sie sollen
           Formular und Chargen nicht auseinanderschieben. */}
       {!isNew && product && (