From 7372590171101dc74738b60714fc422453e198cd Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Tue, 22 Sep 2026 15:01:04 +0200
Subject: [PATCH] Zubehoer: anklickbar, mit Lagerort, und mehr Platz

Die Liste war eine Sackgasse - man sah einen Namen und eine UID, kam aber
nirgends hin. Jetzt fuehrt der Name zum Artikel und die UID zu genau diesem
Stueck; beide Fragen kommen vor ("was ist das fuer ein Netzteil?" gegen "wo ist
dieses eine?").

Dazu der Lagerort je Teil. ItemKurz trug ihn schon, angezeigt wurde er nie -
dabei ist das bei Zubehoer die haeufigste Frage ueberhaupt.

Ab zwei Teilen nimmt der Block zwei Rasterspalten. In einer einzigen Spalte
(minmax 240px) brach schon ein mittellanger Name um.

Und ein Fehler von mir: Die "Gehoert zu"-Zeile war ein rohes <a href> und lud
damit die ganze Seite neu, statt im Router zu navigieren.

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

diff --git a/web/src/components/Zubehoer.jsx b/web/src/components/Zubehoer.jsx
index dae9d0a..5f9ac0d 100644
--- a/web/src/components/Zubehoer.jsx
+++ b/web/src/components/Zubehoer.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { api } from "../api";
 import Icon from "./Icon";
 import { useConfirm } from "../confirm";
@@ -63,14 +64,19 @@ export default function Zubehoer({ item, isAdmin, onChanged, onError }) {
   });
 
   return (
-    <div>
+    // Mit mehreren Teilen wird eine einzelne Rasterspalte zu eng – dann zwei
+    // nehmen, sofern das Raster sie hergibt.
+    <div style={teile.length > 1 ? { gridColumn: "span 2" } : undefined}>
       <span className="muted small">Zubehör</span>
 
       {item.gehoert_zu && (
         <p className="muted small" style={{ marginTop: "var(--sp-1)" }}>
-          Gehört zu <a href={`/i/${item.gehoert_zu.uid}`}>
-            {item.gehoert_zu.product_name || "Einzelstück"} ({item.gehoert_zu.uid})
-          </a>
+          Gehört zu <Link to={`/products/${item.gehoert_zu.product_id}`}>
+            {item.gehoert_zu.product_name || "Einzelstück"}
+          </Link>{" "}
+          <Link to={`/i/${item.gehoert_zu.uid}`} className="muted small">
+            {item.gehoert_zu.uid}
+          </Link>
         </p>
       )}
 
@@ -85,9 +91,17 @@ export default function Zubehoer({ item, isAdmin, onChanged, onError }) {
             // 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}>
+              {/* Zwei Ziele, weil beide Fragen vorkommen: der Name führt zum
+                  Artikel („was ist das für ein Netzteil?"), die UID zu genau
+                  diesem Stück („wo ist dieses eine?"). */}
               <span style={{ flex: 1, minWidth: 0, overflowWrap: "anywhere" }}>
-                {t.product_name || "Einzelstück"}{" "}
-                <span className="muted small">{t.uid}</span>
+                <Link to={`/products/${t.product_id}`}>
+                  {t.product_name || "Einzelstück"}
+                </Link>{" "}
+                <Link to={`/i/${t.uid}`} className="muted small">{t.uid}</Link>
+                <span className="muted small" style={{ display: "block" }}>
+                  {t.location_name || "ohne Lagerort"}
+                </span>
               </span>
               {t.verliehen && <span className="badge warn">verliehen</span>}
               {isAdmin && (