From 2b9b98dd140e498ab3867ff8fd5c5c9dc62bd08a Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Tue, 22 Sep 2026 17:30:03 +0200
Subject: [PATCH] Etiketten-Vorlagen: die ganze Zeile klappt auf und zu

Aufklappen ging nur ueber ein kleines Stift-Symbol am rechten Rand - und dass
derselbe Knopf auch wieder schliesst, sah man ihm nicht an.

Jetzt ist die Zeile selbst der Schalter, mit einem Pfeil links, der den Zustand
zeigt (wie in der Einzelstueck-Tabelle). Der Stift faellt damit weg; die
Knoepfe rechts - CSV, .lbx, Loeschen - bleiben eigenstaendig und loesen das
Auf- und Zuklappen nicht mit aus.

Dafuer eine kleine Klasse .zeilen-schalter: .link-btn waere naheliegend gewesen,
faerbt aber alles im Akzent - Name und graues Beiwerk sollen ihre Farben
behalten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/components/EtikettenVorlagen.jsx | 16 +++++++++-------
 web/src/styles.css                       | 10 ++++++++++
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/src/components/EtikettenVorlagen.jsx b/web/src/components/EtikettenVorlagen.jsx
index 79bf645..73bdf9a 100644
--- a/web/src/components/EtikettenVorlagen.jsx
+++ b/web/src/components/EtikettenVorlagen.jsx
@@ -111,14 +111,21 @@ export default function EtikettenVorlagen({ onError }) {
         {(vorlagen || []).map((v) => (
           <li key={v.id} style={{ flexDirection: "column", alignItems: "stretch" }}>
             <div className="cell-row" style={{ gap: "var(--sp-2)" }}>
-              <span style={{ flex: 1, minWidth: 0 }}>
+              {/* Die ganze Zeile klappt auf und zu, nicht nur ein kleines
+                  Symbol am Rand – und derselbe Griff schliesst wieder. */}
+              <button type="button" className="zeilen-schalter"
+                style={{ flex: 1, minWidth: 0, textAlign: "left" }}
+                aria-expanded={offen === v.id}
+                onClick={() => setOffen(offen === v.id ? null : v.id)}>
+                <Icon name="chevron" size={16}
+                  className={offen === v.id ? "" : "rot-90"} />{" "}
                 <span className="strong">{v.name}</span>{" "}
                 <span className="muted small">
                   {ARTEN.find((a) => a.wert === v.art)?.label || v.art}
                   {" · "}{v.spalten.length} Spalten
                   {v.datei_name ? " · mit Vorlage" : ""}
                 </span>
-              </span>
+              </button>
               <button type="button" className="btn sm" disabled={busy}
                 onClick={() => csv(v)}>
                 <Icon name="download" size={14} />CSV
@@ -129,11 +136,6 @@ export default function EtikettenVorlagen({ onError }) {
                   <Icon name="download" size={14} />.lbx
                 </button>
               )}
-              <button type="button" className="btn-icon"
-                title={offen === v.id ? "Zuklappen" : "Bearbeiten"}
-                onClick={() => setOffen(offen === v.id ? null : v.id)}>
-                <Icon name="edit" size={16} />
-              </button>
               <button type="button" className="btn-icon danger" title="Löschen"
                 onClick={() => loeschen(v)}>
                 <Icon name="trash" size={16} />
diff --git a/web/src/styles.css b/web/src/styles.css
index d9fc945..0ae2dab 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -379,6 +379,16 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .btn-icon:hover { background: var(--surface-2); color: var(--text); }
 .btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); }
 .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-align: left; }
+/* Ganze Zeile als Auf-/Zuklapper: sieht aus wie Text, verhaelt sich wie ein
+   Schalter. Anders als .link-btn ohne Akzentfarbe, damit Name und graues
+   Beiwerk ihre eigenen Farben behalten. Fuer Listen, in denen rechts noch
+   eigene Knoepfe stehen - die duerfen nicht mit ausgeloest werden. */
+.zeilen-schalter {
+  display: flex; align-items: center; gap: 6px;
+  background: none; border: none; padding: 0;
+  font: inherit; color: inherit; cursor: pointer; text-align: left;
+}
+.zeilen-schalter .icon { flex: 0 0 auto; }
 .link-btn:hover { text-decoration: underline; }
 
 /* ---------- Tables ---------- */