From 8cf7cef6e1e754f9904ac048401b10858f4a7dc3 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Wed, 29 Jul 2026 18:52:30 +0200
Subject: [PATCH] Web: Artikelseite nutzt volle Breite, Chargen-Tabelle bekommt
 mehr Platz

Die Bearbeiten-Seite war auf 1400px gedeckelt (viel Rand links/rechts) und teilte
Formular und Chargen 50/50. Jetzt nutzt sie die volle Breite (wie die Listen) und
das Grid ist gespiegelt zu .wide-aside: links das schmale Formular (clamp bis
640px), rechts die Chargen-/Bestandstabelle mit dem Restplatz - so passen
Menge/MHD/Lagerort ohne Seitwaerts-Scrollen. Neuanlage bleibt einspaltig.

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

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 4e5fbac..a920c90 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -150,7 +150,7 @@ export default function App() {
       <Route path="/items" element={<Protected wide><ItemList /></Protected>} />
       <Route path="/chargen" element={<Protected wide><Charges /></Protected>} />
       <Route path="/products/new" element={<Protected adminOnly><ProductForm /></Protected>} />
-      <Route path="/products/:id" element={<Protected><ProductForm /></Protected>} />
+      <Route path="/products/:id" element={<Protected wide><ProductForm /></Protected>} />
       <Route path="/i/:uid" element={<Protected><ItemResolve /></Protected>} />
       <Route path="/l/:id" element={<Protected><LocationResolve /></Protected>} />
       <Route path="/groups" element={<Protected adminOnly wide><Groups /></Protected>} />
diff --git a/web/src/pages/ProductForm.jsx b/web/src/pages/ProductForm.jsx
index 4151a4d..e1602d3 100644
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -593,7 +593,7 @@ export default function ProductForm() {
 
       {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
 
-      <div className="grid-2">
+      <div className={`grid-2${isNew ? "" : " form-plus-table"}`}>
         <form className="card" onSubmit={save}>
           {/* Bild steht neben den Kennfeldern, nicht darueber: Der Platz rechts
               von Barcode, Name und Marke ist ohnehin selten ausgenutzt. Fehlt
diff --git a/web/src/styles.css b/web/src/styles.css
index dc47d0d..5a9ffda 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -189,6 +189,14 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
 @media (max-width: 1000px) {
   .grid-2.wide-aside { grid-template-columns: minmax(0, 1fr); }
 }
+/* Artikelseite (Bearbeiten): links das Formular - dessen Felder brauchen keine
+   halbe Seite -, rechts die Chargen-/Bestandstabelle, die den restlichen Platz
+   bekommt, damit Menge/MHD/Lagerort ohne Seitwaerts-Scrollen nebeneinander
+   passen. Spiegelbild von .wide-aside (dort steht die Tabelle links). */
+.grid-2.form-plus-table { grid-template-columns: clamp(440px, 34%, 640px) minmax(0, 1fr); align-items: start; }
+@media (max-width: 1000px) {
+  .grid-2.form-plus-table { grid-template-columns: minmax(0, 1fr); }
+}
 
 /* ---------- Forms ---------- */
 label { display: block; margin-bottom: var(--sp-4); font-size: 0.8rem; color: var(--muted); font-weight: 580; }