Merge branch 'phase/034-mobil'

Das Markup stammt von AdminLTE, dessen JavaScript wir bewusst nicht
einbinden. Die Klasse sidebar-open liess sich damit setzen, aber nichts nahm
sie wieder weg: keine Flaeche zum Antippen, kein Schliessen beim Navigieren,
kein Escape. Auf dem Telefon blieb das Menue ueber dem Inhalt stehen.

Jetzt gibt es einen eigenen Zustand, auf den Kopfzeile und Menue gemeinsam
hoeren, eine abdunkelnde Flaeche dahinter, einen Schliessen-Knopf im Menuekopf
und das Schliessen beim Navigieren. Der Inhalt dahinter scrollt nicht mehr mit.

Ausserdem zeigt die Dashboard-Tabelle auf dem Telefon nur Host und Ablauf, den
Kunden klein darunter - vorher war rechts die Haelfte abgeschnitten.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

CHANGELOG.md

@@ -17,6 +17,15 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
 
 ### Sicherheit
 
+## [0.20.2] – 2026-10-03
+
+### Behoben
+- **Das Seitenmenü ließ sich auf dem Handy nicht schließen.** Es gab weder eine Fläche zum Antippen noch ein Schließen beim Navigieren – das Markup stammt von AdminLTE, dessen JavaScript wir bewusst nicht einbinden (#034)
+- Die Dashboard-Tabelle war auf dem Telefon rechts abgeschnitten; sie zeigt dort jetzt Host und Ablauf, den Kunden klein darunter (#034)
+
+### Hinzugefügt
+- Schließen-Knopf im Menükopf, Schließen per Escape, und der Inhalt hinter dem offenen Menü scrollt nicht mehr mit (#034)
+
 ## [0.20.1] – 2026-10-03
 
 ### Behoben

DEVLOG.md

@@ -2,7 +2,7 @@
 
 ## Zeitübersicht
 
-**Gesamt:** 16 h 58 min
+**Gesamt:** 17 h 38 min
 
 | Issue | Zeit |
 |---|---|
@@ -39,6 +39,7 @@
 | #031 Update für beide Varianten | 0 h 45 min |
 | #032 LXC-Installation korrigiert | 0 h 20 min |
 | #033 Weiterleitung auf Lausch-Adresse | 0 h 30 min |
+| #034 Bedienung auf dem Handy | 0 h 40 min |
 
 | Meilenstein | Zeit |
 |---|---|
@@ -61,7 +62,7 @@
 
 ## 2026-09-17 · Sitzung 1 · 19:36–laufend
 **Issue:** #001–#007 (Meilensteine v0.1.0 bis v0.4.0)
-**Version:** 0.20.1
+**Version:** 0.20.2
 
 ### Erledigt
 - Auftrag gelesen, Rückfragen gestellt
@@ -179,6 +180,9 @@
 - #033 war hausgemacht: Mein `HOSTNAME=0.0.0.0` aus #031 hat den Healthcheck repariert und dafür alle Weiterleitungen aus Server Actions auf `0.0.0.0` gelenkt. Vorher stand dort der Containername – derselbe Fehler, nur unauffälliger
 - Lehre: Weiterleitungen gehören aus der konfigurierten Adresse gebaut, nie aus dem, was der Server über sich selbst weiß
 
+- Mobile Bedienung (#034): Das Menü ließ sich auf dem Telefon nicht schließen – AdminLTE-Markup ohne AdminLTE-JavaScript. Eigener Zustand, abdunkelnde Fläche, Schließen beim Navigieren und mit Escape
+- Lehre: Die Mobilansicht war mit Screenshots geprüft, nicht mit den Fingern. Ein Bild zeigt nicht, dass etwas nicht wieder weggeht
+
 ### Nächster Schritt
 - #016 Benutzerhandbuch mit Screenshots, danach #017 Favicons und #019 CI-Pipeline
 - Für 1.0.0 fehlt noch: PMG (kein Host verfügbar) und der Fall „aktive Subscription auf PBS“ (#023)

docs/anleitung/README.md

@@ -473,6 +473,11 @@ Server-ID stehen in der Detailansicht unter *Subscription-Historie*.
 
 ## Anhang: dunkles Design und Mobilansicht
 
+Auf dem Telefon öffnet das Symbol links oben das Menü; es schließt sich durch Antippen der
+abgedunkelten Fläche, über das Kreuz im Menükopf, mit Escape – und von selbst, sobald ein Eintrag
+gewählt wurde. Die Tabellen zeigen auf schmalen Bildschirmen nur die wichtigsten Spalten; die
+übrigen Angaben stehen auf der jeweiligen Detailseite.
+
 Das Dashboard folgt der Einstellung des Betriebssystems und lässt sich über das Mondsymbol in der
 Kopfleiste umschalten.
 

docs/issues/034-mobile-bedienung.md

@@ -0,0 +1,28 @@
+# #034 Bedienung auf dem Handy
+**Status:** erledigt
+**Meilenstein:** v0.20.2
+**Labels:** ui, bug
+**Geschätzt:** 2 h   **Tatsächlich:** 0 h 40 min
+
+## Auslöser
+Florian im produktiven Einsatz auf dem Telefon: „Das Menü geht nicht weg.“ Dazu eine Tabelle, von der
+rechts die Hälfte abgeschnitten war.
+
+## Ursache
+Das Markup stammt von AdminLTE, dessen JavaScript binden wir bewusst nicht ein. Die Klasse
+`sidebar-open` ließ sich damit setzen – aber nichts nahm sie wieder weg: keine Fläche zum Antippen,
+kein Schließen beim Navigieren, kein Escape. Auf dem Telefon blieb das Menü über dem Inhalt stehen.
+
+## Behebung
+- Eigener, winziger Zustand (`menuZustand.ts`), auf den Kopfzeile und Menü gemeinsam hören
+- Abdunkelnde Fläche hinter dem Menü – antippen schließt (ein `button`, damit auch per Tastatur erreichbar)
+- Schließen-Knopf im Menükopf, nur auf schmalen Bildschirmen
+- Schließt beim Navigieren und mit Escape
+- Der Inhalt dahinter scrollt nicht mehr mit, solange das Menü offen ist
+- Dashboard-Tabelle: auf dem Telefon nur Host und Ablauf, der Kunde steht klein unter dem Hostnamen.
+  Key und Rechnungsstände erscheinen ab Tablet-Breite – die Host-Tabelle machte das schon vorher so.
+- Fünf Tests für die Zustandslogik
+
+## Nicht geändert
+Die abdunkelnde Fläche gilt nur unter 992 px. Auf breiten Bildschirmen bleibt es beim bisherigen
+Verhalten: Das Menü klappt zu Symbolen zusammen, statt sich über den Inhalt zu legen.

docs/issues/README.md

@@ -37,4 +37,5 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | [#031](031-update-skript-beide-varianten.md) | Update- und Sicherungsskript für beide Varianten | erledigt | v0.20.0 | 2 h | 0 h 45 min |
 | [#032](032-lxc-installation-korrekturen.md) | LXC-Installation: Herkunft der Skripte und Speicher | erledigt | v0.20.1 | 1 h | 0 h 20 min |
 | [#033](033-weiterleitung-lauschadresse.md) | Abmelden führte auf die Lausch-Adresse | erledigt | v0.20.1 | 1 h | 0 h 30 min |
-| | **Summe** | | | **151 h** | **16 h 58 min** |
+| [#034](034-mobile-bedienung.md) | Bedienung auf dem Handy | erledigt | v0.20.2 | 2 h | 0 h 40 min |
+| | **Summe** | | | **153 h** | **17 h 38 min** |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "proxledger",
-  "version": "0.20.1",
+  "version": "0.20.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/(dashboard)/page.tsx

@@ -121,12 +121,22 @@ export default async function DashboardSeite() {
                   <table className="table table-striped align-middle">
                     <thead>
                       <tr>
+                        {/* Auf dem Handy bleiben Host und Ablauf; der Rest käme ohnehin nur
+                            per Seitwärtsscrollen ins Bild (#034). */}
                         <th scope="col">Host</th>
-                        <th scope="col">Kunde</th>
+                        <th scope="col" className="d-none d-md-table-cell">
-                        <th scope="col">Key</th>
+                          Kunde
+                        </th>
+                        <th scope="col" className="d-none d-lg-table-cell">
+                          Key
+                        </th>
                         <th scope="col">Ablauf</th>
-                        <th scope="col">Proxmox</th>
+                        <th scope="col" className="d-none d-sm-table-cell">
-                        <th scope="col">Kundenrechnung</th>
+                          Proxmox
+                        </th>
+                        <th scope="col" className="d-none d-sm-table-cell">
+                          Kundenrechnung
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
@@ -137,8 +147,12 @@ export default async function DashboardSeite() {
                               {host.hostname}
                             </Link>
                             {host.meldetNicht ? <KeineMeldungBadge /> : null}
+                            {/* Auf schmalen Bildschirmen steht der Kunde hier mit darunter. */}
+                            <div className="small text-body-secondary d-md-none">
+                              {host.kunde ? host.kunde.name : "Nicht zugeordnet"}
+                            </div>
                           </td>
-                          <td>
+                          <td className="d-none d-md-table-cell">
                             {host.kunde ? (
                               <Link href={`/kunden/${host.kunde.id}`} className="text-decoration-none">
                                 {host.kunde.name}
@@ -152,16 +166,16 @@ export default async function DashboardSeite() {
                               </Link>
                             )}
                           </td>
-                          <td>
+                          <td className="d-none d-lg-table-cell">
                             <CopyableCode wert={host.subKey} />
                           </td>
                           <td>
                             <AblaufBadge datum={host.nextduedate?.toISOString() ?? null} heute={heute} />
                           </td>
-                          <td>
+                          <td className="d-none d-sm-table-cell">
                             <EinkaufBadge bezahlt={host.einkaufBezahlt} />
                           </td>
-                          <td>
+                          <td className="d-none d-sm-table-cell">
                             <VerkaufBadge erstellt={host.verkaufErstellt} bezahlt={host.verkaufBezahlt} />
                           </td>
                         </tr>

src/app/globals.css

@@ -186,6 +186,19 @@ body {
   display: none;
 }
 
+/*
+ * Fläche hinter dem geöffneten Menü auf schmalen Bildschirmen. Ein Knopf statt eines div,
+ * damit sie auch per Tastatur erreichbar ist.
+ */
+.pl-menu-hintergrund {
+  position: fixed;
+  inset: 0;
+  z-index: 1037; /* unter dem Menü (1038), über allem anderen */
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  border: 0;
+}
+
 /* ---------- Inhaltsbereich ---------- */
 
 .app-content-header {

src/components/layout/Header.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { SearchDialog, type SuchEintrag } from "./SearchDialog";
 import type { Rolle } from "@/generated/prisma/enums";
 import { ROLLEN_TEXT } from "@/server/auth/rollen";
+import { menuUmschalten } from "./menuZustand";
 
 export interface KopfleistenAlert {
   id: string;
@@ -58,16 +59,9 @@ export function Header({
     return () => window.removeEventListener("keydown", tasten);
   }, []);
 
-  /** Sidebar umschalten: auf schmalen Bildschirmen als Overlay, sonst eingeklappt. */
+  /** Seitenmenü umschalten – der Zustand liegt in menuZustand.ts, damit das Menü selbst ihn kennt. */
   const sidebarUmschalten = useCallback(() => {
-    const body = document.body;
+    menuUmschalten();
-    if (window.innerWidth < 992) {
-      body.classList.toggle("sidebar-open");
-      body.classList.remove("sidebar-collapse");
-    } else {
-      body.classList.toggle("sidebar-collapse");
-      body.classList.remove("sidebar-open");
-    }
   }, []);
 
   function themaUmschalten() {

src/components/layout/Sidebar.tsx

@@ -2,10 +2,11 @@
 
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { LogoMitSchriftzug } from "@/components/Logo";
 import type { Rolle } from "@/generated/prisma/enums";
 import { darf } from "@/server/auth/rollen";
+import { menuSchliessen, useMenuOffen } from "./menuZustand";
 
 interface MenuEintrag {
   href: string;
@@ -30,6 +31,21 @@ export function Sidebar({
   const pathname = usePathname();
   const router = useRouter();
   const [suche, setSuche] = useState("");
+  const menuOffen = useMenuOffen();
+
+  // Nach dem Navigieren hat das Menü seinen Zweck erfüllt – auf dem Handy verdeckt es sonst alles.
+  useEffect(() => {
+    menuSchliessen();
+  }, [pathname]);
+
+  // Escape schließt, wie bei jedem anderen Overlay auch.
+  useEffect(() => {
+    function taste(ereignis: KeyboardEvent) {
+      if (ereignis.key === "Escape") menuSchliessen();
+    }
+    window.addEventListener("keydown", taste);
+    return () => window.removeEventListener("keydown", taste);
+  }, []);
 
   const haupt: MenuEintrag[] = [
     { href: "/", titel: "Dashboard", icon: "bi-speedometer2" },
@@ -105,11 +121,30 @@ export function Sidebar({
   }
 
   return (
-    <aside className="app-sidebar shadow" data-bs-theme="dark">
+    <>
-      <div className="sidebar-brand">
+      {/* Fläche hinter dem Menü: antippen schließt. Ohne sie bleibt das Menü auf dem Handy stehen. */}
+      {menuOffen ? (
+        <button
+          type="button"
+          className="pl-menu-hintergrund d-lg-none"
+          aria-label="Menü schließen"
+          onClick={menuSchliessen}
+        />
+      ) : null}
+
+      <aside className="app-sidebar shadow" data-bs-theme="dark">
+      <div className="sidebar-brand d-flex align-items-center justify-content-between">
         <Link href="/" className="brand-link">
           <LogoMitSchriftzug variante="sidebar" groesse={34} />
         </Link>
+        <button
+          type="button"
+          className="btn btn-link text-white d-lg-none pl-touch-target me-2"
+          aria-label="Menü schließen"
+          onClick={menuSchliessen}
+        >
+          <i className="bi bi-x-lg" aria-hidden="true" />
+        </button>
       </div>
 
       <div className="pl-sidebar-user">
@@ -147,6 +182,7 @@ export function Sidebar({
           </ul>
         </nav>
       </div>
-    </aside>
+      </aside>
+    </>
   );
 }

src/components/layout/menuZustand.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/**
+ * Zustand des Seitenmenüs auf schmalen Bildschirmen (#034).
+ *
+ * AdminLTE bringt dafür eigenes JavaScript mit, das wir bewusst nicht einbinden – die Klasse
+ * `sidebar-open` am `body` allein lässt sich aber nicht wieder loswerden: Kein Hintergrund zum
+ * Antippen, kein Schließen beim Navigieren. Deshalb ein eigener, winziger Zustand, auf den
+ * Kopfzeile und Menü gemeinsam hören.
+ */
+
+const SCHMAL = 992;
+
+let offen = false;
+const zuhoerer = new Set<() => void>();
+
+function melden() {
+  for (const ruf of zuhoerer) ruf();
+}
+
+/** Setzt die Klassen, die das AdminLTE-Stylesheet auswertet. */
+function klassenSetzen() {
+  const body = document.body;
+  body.classList.toggle("sidebar-open", offen);
+  // Auf schmalen Bildschirmen liegt das Menü über dem Inhalt; dahinter soll nichts mitscrollen.
+  body.style.overflow = offen && window.innerWidth < SCHMAL ? "hidden" : "";
+}
+
+export function menuUmschalten() {
+  if (window.innerWidth >= SCHMAL) {
+    // Breiter Bildschirm: Das Menü bleibt stehen und wird nur schmaler.
+    document.body.classList.toggle("sidebar-collapse");
+    document.body.classList.remove("sidebar-open");
+    return;
+  }
+
+  offen = !offen;
+  document.body.classList.remove("sidebar-collapse");
+  klassenSetzen();
+  melden();
+}
+
+export function menuSchliessen() {
+  if (!offen) return;
+  offen = false;
+  klassenSetzen();
+  melden();
+}
+
+function abonnieren(ruf: () => void) {
+  zuhoerer.add(ruf);
+  return () => {
+    zuhoerer.delete(ruf);
+  };
+}
+
+export function useMenuOffen(): boolean {
+  // Auf dem Server ist das Menü nie offen – sonst käme es beim ersten Rendern zu einem Unterschied.
+  return useSyncExternalStore(
+    abonnieren,
+    () => offen,
+    () => false,
+  );
+}

tests/menu-zustand.test.ts

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * Prüft das Öffnen und Schließen des Seitenmenüs. Statt eines echten Browsers genügen hier
+ * Attrappen für `document.body` und `window` – geprüft wird, welche Klassen gesetzt werden.
+ */
+
+const klassen = new Set<string>();
+let breite = 390;
+
+function aufraeumen() {
+  klassen.clear();
+  breite = 390;
+}
+
+beforeEach(async () => {
+  aufraeumen();
+  vi.resetModules();
+
+  const body = {
+    classList: {
+      toggle(name: string, an?: boolean) {
+        const soll = an ?? !klassen.has(name);
+        if (soll) klassen.add(name);
+        else klassen.delete(name);
+      },
+      remove(name: string) {
+        klassen.delete(name);
+      },
+      contains: (name: string) => klassen.has(name),
+    },
+    style: { overflow: "" },
+  };
+
+  vi.stubGlobal("document", { body });
+  vi.stubGlobal("window", {
+    get innerWidth() {
+      return breite;
+    },
+  });
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("Seitenmenü auf schmalen Bildschirmen", () => {
+  it("öffnet und schließt wieder", async () => {
+    const { menuUmschalten, menuSchliessen } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    expect(klassen.has("sidebar-open")).toBe(true);
+
+    menuSchliessen();
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+
+  it("sperrt den Inhalt hinter dem offenen Menü gegen Scrollen", async () => {
+    const { menuUmschalten, menuSchliessen } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    expect((document.body as unknown as { style: { overflow: string } }).style.overflow).toBe("hidden");
+
+    menuSchliessen();
+    expect((document.body as unknown as { style: { overflow: string } }).style.overflow).toBe("");
+  });
+
+  it("schließt auch beim zweiten Antippen des Knopfes", async () => {
+    const { menuUmschalten } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    menuUmschalten();
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+
+  it("macht ein zweites Schließen zum Nichts", async () => {
+    const { menuSchliessen } = await import("@/components/layout/menuZustand");
+
+    menuSchliessen();
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+
+  it("klappt auf breiten Bildschirmen nur ein, statt zu überlagern", async () => {
+    breite = 1400;
+    const { menuUmschalten } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    expect(klassen.has("sidebar-collapse")).toBe(true);
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+});