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} />