fix(ui): Projektseite passt wieder in die Fensterbreite
CI / pruefen (push) Canceled after 0s

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>
This commit is contained in:
2026-08-15 07:32:04 +02:00
co-authored by Claude Opus 5
parent c270038edd
commit 1fe41ac2a5
+10 -2
View File
@@ -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[]}