From 0b967d4a3399993fb5894add1dce4d9e36dc9af4 Mon Sep 17 00:00:00 2001
From: Florian Wilde <fw@wildeflorian.de>
Date: Thu, 10 Sep 2026 23:32:18 +0200
Subject: [PATCH] fix(woche): Wochenansicht aus dem schmalen Inhaltsrahmen
 befreien
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Fehler fiel erst im aufgenommenen Bild auf: Bei sieben Spalten plus
Aufgabenliste war der Sonntag abgeschnitten — der Inhaltsrahmen von 64rem
ist für eine Wochenansicht zu eng.

Genau diese eine Seite bricht jetzt aus und nimmt bis zu 100rem, mittig
und mit demselben Seitenabstand wie überall. Die anderen Seiten bleiben
bei ihrer Lesebreite; eine Aufgabenliste über 100rem zu ziehen wäre keine
Verbesserung.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/(app)/woche/page.tsx | 184 ++++++++++++++++++-----------------
 1 file changed, 96 insertions(+), 88 deletions(-)

diff --git a/src/app/(app)/woche/page.tsx b/src/app/(app)/woche/page.tsx
index d26f987..a7c7430 100644
--- a/src/app/(app)/woche/page.tsx
+++ b/src/app/(app)/woche/page.tsx
@@ -106,100 +106,108 @@ export default async function WocheSeite({
   const sonntag = raster.spalten[6]?.tagesBeginn ?? zeitpunkt
 
   return (
-    <div className="flex flex-col gap-6">
-      <header className="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
-            <CalendarRange className="size-6" aria-hidden />
-            Woche
-          </h1>
-          <p className="text-gedaempft-vordergrund mt-1 text-sm">
-            {alsDatum(montag)} bis {alsDatum(sonntag)}
-            {konto ? ` · schreibt nach ${konto.anzeigename}` : ''}
-          </p>
-        </div>
+    /*
+      Die Wochenansicht braucht mehr Breite als der Inhaltsrahmen von 64rem
+      hergibt – bei sieben Spalten plus Aufgabenliste wäre sonst der Sonntag
+      abgeschnitten. Deshalb bricht genau diese Seite aus und nimmt bis zu
+      100rem, mittig und mit demselben Seitenabstand wie überall.
+    */
+    <div className="relative left-1/2 w-screen max-w-[100rem] -translate-x-1/2 px-4 sm:px-6">
+      <div className="flex flex-col gap-6">
+        <header className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
+              <CalendarRange className="size-6" aria-hidden />
+              Woche
+            </h1>
+            <p className="text-gedaempft-vordergrund mt-1 text-sm">
+              {alsDatum(montag)} bis {alsDatum(sonntag)}
+              {konto ? ` · schreibt nach ${konto.anzeigename}` : ''}
+            </p>
+          </div>
 
-        <nav className="flex items-center gap-2" aria-label="Woche wechseln">
-          <Link
-            href={`/woche?versatz=${sichereWochen - 1}`}
-            className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
-          >
-            Zurück
-          </Link>
-          <Link
-            href="/woche"
-            className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
-          >
-            Diese Woche
-          </Link>
-          <Link
-            href={`/woche?versatz=${sichereWochen + 1}`}
-            className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
-          >
-            Weiter
-          </Link>
-        </nav>
-      </header>
-
-      {!konto && (
-        <Card>
-          <CardInhalt className="py-4 text-sm">
-            Noch kein Kalender verbunden. Zeitblöcke landen erst dann im Kalender —{' '}
+          <nav className="flex items-center gap-2" aria-label="Woche wechseln">
             <Link
-              href="/kalenderkonten"
-              className="text-betont underline underline-offset-4"
+              href={`/woche?versatz=${sichereWochen - 1}`}
+              className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
             >
-              jetzt verbinden
+              Zurück
             </Link>
-            .
-          </CardInhalt>
-        </Card>
-      )}
+            <Link
+              href="/woche"
+              className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
+            >
+              Diese Woche
+            </Link>
+            <Link
+              href={`/woche?versatz=${sichereWochen + 1}`}
+              className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
+            >
+              Weiter
+            </Link>
+          </nav>
+        </header>
 
-      <Wochenraster
-        spalten={spalten}
-        zeilen={raster.zeilen}
-        vonMinute={raster.vonMinute}
-        bisMinute={raster.bisMinute}
-        kalenderkontoId={konto?.id ?? null}
-        zeitbloecke={daten.zeitbloecke.map((z) => ({
-          id: z.id,
-          beginnMs: z.beginn.getTime(),
-          endeMs: z.ende.getTime(),
-          titel: z.titel,
-          bereichFarbe: z.bereichFarbe,
-          kalenderName: z.kalenderName,
-          letzterFehler: z.letzterFehler,
-          offen: z.offen,
-        }))}
-        termine={daten.termine.map((t) => ({
-          id: t.id,
-          beginnMs: t.beginn.getTime(),
-          endeMs: t.ende.getTime(),
-          betreff: t.betreff,
-          ganztaegig: t.ganztaegig,
-          frei: t.zeigtAls === 'FREI',
-          kalenderName: t.kalenderName,
-        }))}
-        aufgaben={aufgaben.map((a) => ({
-          id: a.id,
-          titel: a.titel,
-          aufwandMinuten: a.aufwandMinuten,
-          bereichName: a.bereich?.name ?? null,
-          bereichFarbe: a.bereich?.farbe ?? null,
-          faelligText: a.faelligAm
-            ? faelligkeitText(faelligkeitEinordnen(a.faelligAm, heute))
-            : null,
-          ueberfaellig: istUeberfaellig(a.faelligAm, a.status, heute),
-          bereitsGeplant: a._count.zeitbloecke,
-        }))}
-      />
+        {!konto && (
+          <Card>
+            <CardInhalt className="py-4 text-sm">
+              Noch kein Kalender verbunden. Zeitblöcke landen erst dann im Kalender —{' '}
+              <Link
+                href="/kalenderkonten"
+                className="text-betont underline underline-offset-4"
+              >
+                jetzt verbinden
+              </Link>
+              .
+            </CardInhalt>
+          </Card>
+        )}
 
-      <p className="text-gedaempft-vordergrund text-xs">
-        Aufgabe aus der linken Spalte in ein Zeitfenster ziehen, um sie einzuplanen. Ein
-        Zeitblock lässt sich am Griff verschieben; das Kreuz plant ihn wieder aus. Graue
-        Balken sind Termine aus dem Kalender — sie lassen sich hier nicht verschieben.
-      </p>
+        <Wochenraster
+          spalten={spalten}
+          zeilen={raster.zeilen}
+          vonMinute={raster.vonMinute}
+          bisMinute={raster.bisMinute}
+          kalenderkontoId={konto?.id ?? null}
+          zeitbloecke={daten.zeitbloecke.map((z) => ({
+            id: z.id,
+            beginnMs: z.beginn.getTime(),
+            endeMs: z.ende.getTime(),
+            titel: z.titel,
+            bereichFarbe: z.bereichFarbe,
+            kalenderName: z.kalenderName,
+            letzterFehler: z.letzterFehler,
+            offen: z.offen,
+          }))}
+          termine={daten.termine.map((t) => ({
+            id: t.id,
+            beginnMs: t.beginn.getTime(),
+            endeMs: t.ende.getTime(),
+            betreff: t.betreff,
+            ganztaegig: t.ganztaegig,
+            frei: t.zeigtAls === 'FREI',
+            kalenderName: t.kalenderName,
+          }))}
+          aufgaben={aufgaben.map((a) => ({
+            id: a.id,
+            titel: a.titel,
+            aufwandMinuten: a.aufwandMinuten,
+            bereichName: a.bereich?.name ?? null,
+            bereichFarbe: a.bereich?.farbe ?? null,
+            faelligText: a.faelligAm
+              ? faelligkeitText(faelligkeitEinordnen(a.faelligAm, heute))
+              : null,
+            ueberfaellig: istUeberfaellig(a.faelligAm, a.status, heute),
+            bereitsGeplant: a._count.zeitbloecke,
+          }))}
+        />
+
+        <p className="text-gedaempft-vordergrund text-xs">
+          Aufgabe aus der linken Spalte in ein Zeitfenster ziehen, um sie einzuplanen. Ein
+          Zeitblock lässt sich am Griff verschieben; das Kreuz plant ihn wieder aus. Graue
+          Balken sind Termine aus dem Kalender — sie lassen sich hier nicht verschieben.
+        </p>
+      </div>
     </div>
   )
 }