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:
@@ -85,8 +85,16 @@ export default async function ProjectPage({ params }: PageProps) {
|
|||||||
progressFromTasks={detail.progressFromTasks}
|
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="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">
|
<section className="glass p-5">
|
||||||
<h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-slate-300">
|
<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" />
|
<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} />
|
<NotesPanel projectId={detail.id} notes={detail.notes} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-6 lg:col-span-7">
|
<div className="min-w-0 space-y-6 lg:col-span-7">
|
||||||
<GitPanel
|
<GitPanel
|
||||||
project={detail}
|
project={detail}
|
||||||
connections={connections as unknown as ConnectionSafe[]}
|
connections={connections as unknown as ConnectionSafe[]}
|
||||||
|
|||||||
Reference in New Issue
Block a user