speicher: Befehle in den Vorschlägen als Code (die Schrift zog „--ignore-mountpoints“ zu „—ignore-mountpoints“ zusammen)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/homelab/Speicher.test.tsx

@@ -79,6 +79,13 @@ describe("Alte Kernel", () => {
     expect(start).toHaveBeenCalledWith(kernel.aktion)
   })
 
+  it("setzt Befehle als Code, damit „--“ nicht zum Gedankenstrich wird", () => {
+    const trim = { ...kernel, art: "trim" as const, aktion: null, text: "In Proxmox: pve → Shell → `pct fstrim 104 --ignore-mountpoints`." }
+    render(<Speicher daten={{ ...daten, empfehlungen: [trim] }} />)
+    const befehl = screen.getByText("pct fstrim 104 --ignore-mountpoints")
+    expect(befehl.tagName).toBe("CODE")
+  })
+
   it("zeigt den laufenden Schritt statt des Knopfs", () => {
     render(<Speicher daten={{ ...daten, empfehlungen: [kernel] }} laeuft="kernel_aufraeumen …" onAktion={() => {}} />)
     expect(screen.getByRole("status")).toHaveTextContent("Läuft: kernel_aufraeumen …")

frontend/src/components/homelab/Speicher.tsx

@@ -198,6 +198,19 @@ export function Speicher({ daten, laeuft = null, gesperrt = false, onAktion }: {
 
 const ORT: Record<string, string> = { pool: "Speicherpool", systemplatte: "Systemplatte des Hosts" }
 
+/** Befehle stehen im Text zwischen Backticks: als Code, ohne Ligaturen — sonst zog die Schrift „--“ zu „—“ zusammen. */
+function MitBefehlen({ text }: { text: string }) {
+  return text.split(/`([^`]+)`/).map((teil, i) =>
+    i % 2 === 1 ? (
+      <code key={i} className="rounded bg-erhaben px-1 font-mono text-[13px] text-foreground [font-variant-ligatures:none]">
+        {teil}
+      </code>
+    ) : (
+      teil
+    ),
+  )
+}
+
 function Vorschlag({ e, laeuft, gesperrt, onFrage }: {
   e: SpeicherEmpfehlung
   laeuft: string | null
@@ -211,7 +224,7 @@ function Vorschlag({ e, laeuft, gesperrt, onFrage }: {
         <span className="ziffern text-sm text-text-2">{e.platz ? `≈ ${groesse(e.platz)}` : "Größe unbekannt"}</span>
       </div>
       {e.ort && <span className="schild text-xs text-text-3">{ORT[e.ort] ?? e.ort}</span>}
-      <p className="text-sm break-words text-text-2">{e.text}</p>
+      <p className="text-sm break-words text-text-2"><MitBefehlen text={e.text} /></p>
       {e.aktion && (laeuft ? (
         <p role="status" className="text-sm text-cyan">Läuft: {laeuft}</p>
       ) : (