From 1fe41ac2a5cf07909ecdd833fe595b427e971db9 Mon Sep 17 00:00:00 2001
From: Florian Wilde <wilde.florian@gmail.com>
Date: Sat, 15 Aug 2026 07:32:04 +0200
Subject: [PATCH] fix(ui): Projektseite passt wieder in die Fensterbreite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auf dem Telefon war die Projektseite doppelt so breit wie der Bildschirm:
die Kopfleiste endete auf halber Strecke, "Jetzt synchronisieren" und der
Notiz-Knopf lagen ausserhalb.

Ursache sind die beiden Rasterspalten. Ein Rasterkind hat "min-width: auto"
und weigert sich damit, unter die Inhaltsbreite seines breitesten Kindes zu
schrumpfen. Breitestes Kind ist die Heatmap mit ueber 700px – sie zog die
Spalte auf und mit ihr die ganze Seite. Das overflow-x-auto um sie herum
kam gar nicht zum Zug, weil der Elter ihm die volle Breite zugestand.

Mit min-w-0 an beiden Spalten greift es wieder: gemessen auf 390px liegen
scrollWidth und clientWidth jetzt gleichauf, vorher 811 zu 390.

Warum das beim Umbau der mobilen Ansicht nicht auffiel: die Messung lief
gegen ein Projekt ohne Repository, ohne Snapshot und ohne README. Ohne
Heatmap gibt es nichts, was die Spalte aufziehen koennte. Nachgestellt
wurde das jetzt mit einem vollstaendigen Projekt – Snapshot, README mit
Codeblock und Tabelle, Notizen, Aufgaben.

Ein Regressionstest dafuer fehlt noch: die E2E-Tests legen Projekte ueber
die API an und kommen ohne echten Abgleich zu keinem Snapshot, also auch
zu keiner Heatmap. Ein Test ohne sie wuerde die Sicherheit vortaeuschen,
ohne den Fall zu treffen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/app/projects/[id]/page.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index 400254b..f615808 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -85,8 +85,16 @@ export default async function ProjectPage({ params }: PageProps) {
         progressFromTasks={detail.progressFromTasks}
       />
 
+      {/*
+        min-w-0 an beiden Spalten ist hier nicht Kosmetik, sondern der Kern:
+        ein Rasterkind hat "min-width: auto" und weigert sich damit, unter
+        die Inhaltsbreite seines breitesten Kindes zu schrumpfen. Die
+        Heatmap ist ueber 700px breit – auf dem Telefon zog sie damit die
+        ganze Spalte und mit ihr die Seite auseinander. Erst mit min-w-0
+        greift das overflow-x-auto darin ueberhaupt.
+      */}
       <div className="grid gap-6 lg:grid-cols-12">
-        <div className="space-y-6 lg:col-span-5">
+        <div className="min-w-0 space-y-6 lg:col-span-5">
           <section className="glass p-5">
             <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-slate-300">
               <FileText className="h-4 w-4 text-cyan-300" />
@@ -115,7 +123,7 @@ export default async function ProjectPage({ params }: PageProps) {
           <NotesPanel projectId={detail.id} notes={detail.notes} />
         </div>
 
-        <div className="space-y-6 lg:col-span-7">
+        <div className="min-w-0 space-y-6 lg:col-span-7">
           <GitPanel
             project={detail}
             connections={connections as unknown as ConnectionSafe[]}