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

@@ -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)" }}>
+            // Der Name wächst, alles rechts davon bleibt stehen. Ohne das
-              <span>{t.product_name || "Einzelstück"}</span>
+            // 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} />