fix(ui): Übersicht am Handy nicht breiter als der Bildschirm

Lange Zeilen unter „Letzte Deployments“ sprengten die Gitterspalte; der mobile Browser zoomte heraus, die Navigationsschublade verdeckte dann „Abmelden“. keinQuerscrollen misst jetzt gegen die eingestellte Breite – gegen innerWidth gemessen fiel das Herauszoomen nicht auf.

Refs #023

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

CHANGELOG.md

@@ -13,6 +13,8 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
 ### Geändert
 
 ### Behoben
+- Übersicht am Handy breiter als der Bildschirm (lange Auftragszeilen); der Browser zoomte heraus und die Navigation verdeckte „Abmelden“ (#023)
+- Seitenleiste scrollt, wenn ihr Inhalt höher als der Bildschirm ist (#023)
 - Beim Wechsel des Servers im Assistenten wurde die erste Bridge statt vmbr0 vorbelegt (#023)
 
 ### Entfernt

src/app/(app)/page.tsx

@@ -24,7 +24,8 @@ export default async function Uebersicht() {
         <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Übersicht</h1>
       </header>
 
-      <div className="grid gap-6 lg:grid-cols-2">
+      {/* min-w-0: Gitterspalten schrumpfen sonst nicht unter lange Zeilen – am Handy zoomte der Browser dann heraus. */}
+      <div className="grid gap-6 lg:grid-cols-2 [&>*]:min-w-0">
         <Karte
           titel="Server"
           aktion={

src/components/seitenleiste.tsx

@@ -58,7 +58,9 @@ export function Seitenleiste({ eintraege, benutzer, version, theme, serverUmscha
   }
 
   const inhalt = (
-    <div className="flex h-full flex-col gap-6 p-4">
+    // min-h-full statt h-full: ist der Inhalt höher als der Bildschirm (Handy quer, viele Einträge),
+    // wächst er und die Leiste scrollt, statt dass die Navigation den Fuß mit „Abmelden“ überdeckt.
+    <div className="flex min-h-full flex-col gap-6 p-4">
       <Link href="/" className="flex items-center gap-2.5 px-2 pt-1" onClick={() => setOffen(false)}>
         <Symbol className="h-8 w-8 shrink-0" />
         <Wortmarke className="text-lg" />
@@ -148,7 +150,7 @@ export function Seitenleiste({ eintraege, benutzer, version, theme, serverUmscha
       <aside
         id="seitenleiste"
         className={clsx(
-          "border-linie bg-panel fixed inset-y-0 left-0 z-50 w-72 border-r transition-transform lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0",
+          "border-linie bg-panel fixed inset-y-0 left-0 z-50 w-72 overflow-y-auto border-r transition-transform lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0",
           offen ? "translate-x-0" : "-translate-x-full",
         )}
       >

tests/e2e/helfer.ts

@@ -12,12 +12,18 @@ export async function anmelden(page: Page, ziel = "/") {
   await expect(page).not.toHaveURL(/\/anmelden/);
 }
 
+/**
+ * Gegen die eingestellte Bildschirmbreite messen, nicht gegen innerWidth: bei mobiler Emulation
+ * zoomt der Browser bei zu breitem Inhalt heraus, und innerWidth wächst einfach mit.
+ */
 export async function keinQuerscrollen(page: Page) {
-  const breiten = await page.evaluate(() => ({
+  const breite = page.viewportSize()!.width;
-    inhalt: document.documentElement.scrollWidth,
+  const inhalt = await page.evaluate(() => ({
+    scroll: document.documentElement.scrollWidth,
     fenster: window.innerWidth,
   }));
-  expect(breiten.inhalt).toBeLessThanOrEqual(breiten.fenster);
+  expect(inhalt.fenster, "Der Browser hat herausgezoomt – etwas ist breiter als der Bildschirm").toBe(breite);
+  expect(inhalt.scroll).toBeLessThanOrEqual(breite);
 }
 
 /** Mit dem Präfix zz-e2e lassen sich Testdaten erkennen und aufräumen. */