From a9ea35cab58f1f165c00fdbcf175b8d33195d499 Mon Sep 17 00:00:00 2001
From: Florian Wilde <wilde.florian@gmail.com>
Date: Mon, 12 Oct 2026 22:06:13 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=C3=9Cbersicht=20am=20Handy=20nicht?=
 =?UTF-8?q?=20breiter=20als=20der=20Bildschirm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                    |  2 ++
 src/app/(app)/page.tsx          |  3 ++-
 src/components/seitenleiste.tsx |  6 ++++--
 tests/e2e/helfer.ts             | 12 +++++++++---
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e586f6..836ed74 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index 9f8a3a6..bbdcddd 100644
--- a/src/app/(app)/page.tsx
+++ b/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={
diff --git a/src/components/seitenleiste.tsx b/src/components/seitenleiste.tsx
index 742ed26..a7bb5f9 100644
--- a/src/components/seitenleiste.tsx
+++ b/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",
         )}
       >
diff --git a/tests/e2e/helfer.ts b/tests/e2e/helfer.ts
index 3eb4a6e..550c956 100644
--- a/tests/e2e/helfer.ts
+++ b/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(() => ({
-    inhalt: document.documentElement.scrollWidth,
+  const breite = page.viewportSize()!.width;
+  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. */