Der Streifen neben der Bildlaufleiste waren fuenfzig Schatten

Anmerkung 5, jetzt mit Ursache statt mit Vermutung.

SlideOver bleibt geschlossen im DOM — absichtlich, sonst gaebe es keine
Schiebebewegung. Geschlossen steht das Panel per translate-x-full hinter dem
rechten Bildschirmrand, die eigene linke Kante genau auf dem Rand. Der
Schatten ist das Einzige, was von dort noch ins Bild reicht: 32 px
Weichzeichnung nach aussen, und aussen heisst hier nach links, in die Seite
hinein.

Bei einem Panel faellt das nicht auf. Die Protokollseite rendert aber eines
**je Zeile** — AuditDetail haengt an jeder. Bei fuenfzig Lagen zu 18 %
Deckkraft bleiben rechnerisch 0,01 % Durchsicht: ein fast schwarzer Streifen
neben der Bildlaufleiste, mit Stufen dort, wo sich die Weichzeichnungen der
einzelnen Lagen ueberlagern. Genau das war zu sehen, und genau deshalb nur
auf dieser Seite.

Die Tiefe gehoert zum geoeffneten Panel, nicht zum weggeschobenen. Sie erst
beim Oeffnen zu setzen kostet nichts.

Die Aenderung am Ueberlauf der Tabellenkarten aus dem vorigen Commit bleibt
— sie war eine Aufraeumung, die fuer sich steht, aber nicht die Ursache.

tests/components/SlideOver.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SlideOver } from "@/components/ui/SlideOver";
+
+// Das Panel bleibt geschlossen im DOM, damit die Schiebebewegung laufen kann.
+// Es steht dann per translate-x-full hinter dem rechten Bildschirmrand — die
+// eigene linke Kante genau auf dem Rand. Ein Schatten reicht von dort noch
+// ins Bild zurück, und die Protokollseite rendert ein Panel je Zeile: fünfzig
+// Schatten an derselben Stelle ergaben einen fast schwarzen Streifen neben
+// der Bildlaufleiste.
+
+function panel(container: HTMLElement): HTMLElement {
+  const el = container.querySelector('[role="dialog"]');
+  expect(el, "Das Panel fehlt").not.toBeNull();
+  return el as HTMLElement;
+}
+
+describe("SlideOver", () => {
+  it("bleibt geschlossen im DOM", () => {
+    // Ohne das gäbe es keine Schiebebewegung beim Schliessen — und dieser
+    // Test hier hätte keinen Gegenstand.
+    const { container } = render(
+      <SlideOver open={false} onClose={() => {}} title="Titel">
+        Inhalt
+      </SlideOver>
+    );
+    expect(panel(container).className).toContain("translate-x-full");
+  });
+
+  it("trägt geschlossen keinen Schatten", () => {
+    const { container } = render(
+      <SlideOver open={false} onClose={() => {}} title="Titel">
+        Inhalt
+      </SlideOver>
+    );
+    expect(panel(container).className).not.toContain("shadow-");
+  });
+
+  it("trägt geöffnet einen Schatten", () => {
+    const { container } = render(
+      <SlideOver open onClose={() => {}} title="Titel">
+        Inhalt
+      </SlideOver>
+    );
+    expect(panel(container).className).toContain("shadow-[var(--shadow-overlay)]");
+    expect(panel(container).className).toContain("translate-x-0");
+  });
+
+  it("nimmt das geschlossene Panel aus der Bedienung", () => {
+    // `inert` und nicht aria-hidden: nur das entfernt die Felder auch aus der
+    // Tabulatorreihenfolge und blockiert Klicks.
+    const { container } = render(
+      <SlideOver open={false} onClose={() => {}} title="Titel">
+        Inhalt
+      </SlideOver>
+    );
+    expect(panel(container).closest("[inert]")).not.toBeNull();
+  });
+
+  it("benennt den Dialog nach seiner Überschrift", () => {
+    render(
+      <SlideOver open onClose={() => {}} title="Anton Aigner">
+        Inhalt
+      </SlideOver>
+    );
+    expect(screen.getByRole("dialog", { name: "Anton Aigner" })).toBeInTheDocument();
+  });
+});