Artikelformular: Typ und Verwaltung als Auswahlliste

Zwei Umschalter mit zusammen fuenf Knoepfen beanspruchten zwei volle Zeilen im
Formular - der dreifache ("Menge je Lagerort / Einzelstuecke /
Verbrauchsgegenstand") brauchte dafuer sogar eine eigene Umbruch-Regel. Als
Auswahllisten stehen sie kompakt untereinander und sehen aus wie die
Kategorie-Auswahl direkt dazwischen.

Am Verhalten aendert sich nichts: changeModus und setObjMode bekommen denselben
Wert, nur aus onChange statt onClick.

.seg-wrap wird dadurch nirgends mehr gebraucht und faellt weg. .segmented und
.seg-label bleiben - die nutzen Mindestbestaende, Produkte und Kategorien
weiterhin.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/pages/ProductForm.jsx

@@ -741,18 +741,13 @@ export default function ProductForm() {
           {/* Typ und Kategorie an fester Position – VOR den typ-spezifischen
               Feldern, damit der Umschalter nicht je nach Auswahl springt. */}
           <div className="row">
-            <label className="seg-label">
+            <label style={{ maxWidth: 240 }}>
               Typ
-              <div className="segmented">
+              <select value={modus} disabled={readOnly}
-                <button type="button" className={modus === "food" ? "active" : ""}
+                onChange={(e) => changeModus(e.target.value)}>
-                  onClick={() => changeModus("food")} disabled={readOnly}>
+                <option value="food">Lebensmittel</option>
-                  Lebensmittel
+                <option value="object">Gegenstand</option>
-                </button>
+              </select>
-                <button type="button" className={modus === "object" ? "active" : ""}
-                  onClick={() => changeModus("object")} disabled={readOnly}>
-                  Gegenstand
-                </button>
-              </div>
             </label>
           </div>
           <div className="row">
@@ -812,16 +807,14 @@ export default function ProductForm() {
               Verbrauchsgegenstand (= wie ein Lebensmittel als Charge geführt). */}
           {isObject && (
             <div className="row">
-              <label className="grow seg-label">
+              <label style={{ maxWidth: 320 }}>
                 Verwaltung
-                <div className="segmented seg-wrap">
+                <select value={objMode} disabled={readOnly}
-                  <button type="button" className={objMode === "count" ? "active" : ""}
+                  onChange={(e) => setObjMode(e.target.value)}>
-                    onClick={() => setObjMode("count")} disabled={readOnly}>Menge je Lagerort</button>
+                  <option value="count">Menge je Lagerort</option>
-                  <button type="button" className={objMode === "individual" ? "active" : ""}
+                  <option value="individual">Einzelstücke</option>
-                    onClick={() => setObjMode("individual")} disabled={readOnly}>Einzelstücke</button>
+                  <option value="bulk">Verbrauchsgegenstand</option>
-                  <button type="button" className={objMode === "bulk" ? "active" : ""}
+                </select>
-                    onClick={() => setObjMode("bulk")} disabled={readOnly}>Verbrauchsgegenstand</button>
-                </div>
               </label>
             </div>
           )}

web/src/styles.css

@@ -1154,12 +1154,10 @@ 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
+/* Beschriftung neben einem Umschalter mit etwas Abstand statt direkt daneben
-   direkt daneben geklebt. */
+   geklebt (Mindestbestände). */
 .seg-label { display: flex; align-items: center; gap: var(--sp-3); }
 .seg-label .segmented { margin-top: 0; }
-/* Dreifach-Umschalter (Verwaltung) darf bei Platznot umbrechen. */
-.segmented.seg-wrap { flex-wrap: wrap; }
 
 /* Artikelfoto mit Aufnahme-/Galerie-Knöpfen */
 .produkt-foto { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }