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

@@ -1135,36 +1135,37 @@ export default function ProductForm() {
             }}
             onError={setError}
           />
-        ) : (
+        ) : product && (form.individual ? (
-          // Gegenstand als Menge je Lagerort (Einzelstücke stehen unten).
+          // Einzelstücke stehen NEBEN dem Formular, nicht darunter: Sie sind
-          product && !form.individual && (
+          // das, was man an so einem Artikel am häufigsten braucht. Unten
-            <ObjektBestand
+          // 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 () => {
+              onChanged={async () => { setProduct(await api.getProduct(id)); }}
-                setLots(await api.listLots(id));
-                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 && (