From 41e8cce6129df08e06bf9ea9b59c6470dc1f768d Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Sun, 26 Jul 2026 21:23:36 +0200
Subject: [PATCH] Web: Produktformular-Feinschliff (Barcode-Buttons,
 Foto-Entfernen, Typ-Abstand)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Barcode-Zeile: Eingabefeld fuellt die Breite, die beiden Knoepfe (Nachschlagen
  + Vergleichen) stehen nebeneinander statt gestapelt – keine Luecke mehr rechts.
- Foto: "Entfernen" ist jetzt ein normaler Button wie "Foto machen"/"Galerie"
  (gleiche Hoehe/Ausrichtung) statt reiner Text.
- Umschalter "Typ"/"Verwaltung": Abstand zwischen Beschriftung und Segmenten.

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

diff --git a/web/src/pages/ProductForm.jsx b/web/src/pages/ProductForm.jsx
index e5916c2..5464c28 100644
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -534,7 +534,7 @@ export default function ProductForm() {
           <div className="produkt-kopf">
             <div className="produkt-kopf-felder">
               <div className="field-inline">
-                <label className="grow">
+                <label className="grow" style={{ flex: "1 1 auto", minWidth: 0 }}>
                   Barcode
                   <input value={form.barcode} onChange={(e) => set("barcode", e.target.value)} disabled={readOnly} />
                 </label>
@@ -576,7 +576,7 @@ export default function ProductForm() {
                       <input hidden type="file" accept="image/*" onChange={onPickPhoto} />
                     </label>
                     {hatBild && (
-                      <button type="button" className="btn sm ghost" onClick={removePhoto}>Entfernen</button>
+                      <button type="button" className="btn sm" onClick={removePhoto}>Entfernen</button>
                     )}
                   </div>
                 )}
@@ -677,7 +677,7 @@ export default function ProductForm() {
           </div>
           </>)}
           <div className="row">
-            <label className="grow">
+            <label className="grow seg-label">
               Typ
               <div className="segmented">
                 <button type="button" className={modus === "food" ? "active" : ""}
@@ -744,7 +744,7 @@ export default function ProductForm() {
 
           {isObject && (<>
             <div className="row">
-              <label className="grow">
+              <label className="grow seg-label">
                 Verwaltung
                 <div className="segmented">
                   <button type="button" className={!form.individual ? "active" : ""}
diff --git a/web/src/styles.css b/web/src/styles.css
index 816daa1..8da8715 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -212,8 +212,9 @@ input::placeholder { color: var(--muted); opacity: 0.7; }
   .produkt-kopf { flex-direction: column-reverse; align-items: center; }
 }
 
-/* Zwei gestapelte Knoepfe neben einem Eingabefeld. */
-.knopf-spalte { display: flex; flex-direction: column; gap: var(--sp-2); flex: 0 0 auto; }
+/* Knoepfe neben dem Barcode-Feld: nebeneinander, mit Umbruch auf schmalen
+   Fenstern. Das Eingabefeld daneben fuellt die restliche Breite. */
+.knopf-spalte { display: flex; flex-flow: row wrap; gap: var(--sp-2); flex: 0 0 auto; }
 .knopf-spalte .btn { justify-content: center; white-space: nowrap; }
 
 /* Gegenueberstellung mit Open Food Facts */
@@ -912,8 +913,12 @@ tr.row-active { background: var(--surface-2); }
 .segmented button + button { border-left: 1px solid var(--border); }
 .segmented button.active { background: var(--accent); color: #fff; }
 .segmented button:disabled { cursor: default; opacity: 0.6; }
+/* Beschriftung (z.B. „Typ") neben einem Umschalter mit etwas Abstand statt
+   direkt daneben geklebt. */
+.seg-label { display: flex; align-items: center; gap: var(--sp-3); }
+.seg-label .segmented { margin-top: 0; }
 
 /* Artikelfoto mit Aufnahme-/Galerie-Knöpfen */
 .produkt-foto { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
-.foto-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; }
+.foto-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; align-items: center; }
 .foto-knoepfe .btn { cursor: pointer; }