From a82405b92ae0792ad38f3e94a308ba0e71b9504a Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Tue, 22 Sep 2026 14:58:46 +0200
Subject: [PATCH] Zubehoer-Liste: langer Name schiebt den Loesen-Knopf nicht
 mehr um

.clean-list li bricht bewusst um (flex-wrap), damit lange Inhalte nicht aus der
Karte laufen. In der Zubehoer-Liste traf das den Loesen-Knopf: Bei einem Namen
wie "Shooter Grip fuer WII Controller" landete das x allein in einer zweiten
Zeile unter dem Namen.

Jetzt waechst der Textblock (flex:1, min-width:0) und alles rechts davon bleibt
stehen. Der Name bricht innerhalb seines Blocks um, das x bleibt rechts und
mittig. overflow-wrap: anywhere fuer den Fall, dass ein einzelnes Wort breiter
ist als die Spalte.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/components/Zubehoer.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Zubehoer.jsx b/web/src/components/Zubehoer.jsx
index ca897e4..dae9d0a 100644
--- a/web/src/components/Zubehoer.jsx
+++ b/web/src/components/Zubehoer.jsx
@@ -81,12 +81,18 @@ export default function Zubehoer({ item, isAdmin, onChanged, onError }) {
       {teile.length > 0 && (
         <ul className="clean-list" style={{ marginTop: "var(--sp-2)" }}>
           {teile.map((t) => (
-            <li key={t.id} className="cell-row" style={{ gap: "var(--sp-2)" }}>
-              <span>{t.product_name || "Einzelstück"}</span>
-              <span className="muted small">{t.uid}</span>
+            // Der Name wächst, alles rechts davon bleibt stehen. Ohne das
+            // schiebt ein langer Name („Shooter Grip für WII Controller") den
+            // Lösen-Knopf in eine eigene Zeile – .clean-list li bricht um.
+            <li key={t.id}>
+              <span style={{ flex: 1, minWidth: 0, overflowWrap: "anywhere" }}>
+                {t.product_name || "Einzelstück"}{" "}
+                <span className="muted small">{t.uid}</span>
+              </span>
               {t.verliehen && <span className="badge warn">verliehen</span>}
               {isAdmin && (
                 <button type="button" className="btn-icon danger" disabled={busy}
+                  style={{ flex: "0 0 auto" }}
                   onClick={() => loesen(t)} aria-label={`„${t.uid}“ vom Gerät lösen`}
                   title="Vom Gerät lösen">
                   <Icon name="close" size={14} />