feat(stammbaum): Desktop-Ansicht passt den ganzen Baum ein + höhere Zeichenfläche
All checks were successful
CI / Backend Tests (.NET) (push) Successful in 1m3s
CI / Frontend Tests (Node/Vite) (push) Successful in 9m35s
CI / Docker Build & Push (push) Successful in 1m30s

Auf dem Desktop wurde der Baum bei festem Zoom 1 rechts abgeschnitten (man sah
nur 1–2 Generationen, der Rest lag außerhalb) und viel Fläche blieb leer. Die
Standard-Ansicht passt jetzt den gesamten geladenen Baum ein — gedeckelt auf
Zoom 1, damit Karten bei kleinen Bäumen nicht vergrößert/unscharf werden. Mobil
bleibt es bei „Wurzel links + Pan" (sonst würden die Karten winzig). Zeichen-
fläche von 62dvh auf 72dvh erhöht (füllt die Desktop-Höhe besser).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-22 16:26:50 +02:00
parent cf672c0933
commit 2befe53df9
2 changed files with 16 additions and 5 deletions

View File

@@ -259,16 +259,27 @@ export default function StammbaumPage() {
return () => observer.disconnect()
}, [hasRoot])
/* ── Ansicht (Zoom/Position): Wurzelkarte links, vertikal zentriert —
so sind die Eltern auch auf dem Smartphone sofort sichtbar. ── */
/* ── Ansicht (Zoom/Position) ──
Desktop: den gesamten geladenen Baum einpassen, aber nie über 1
vergrößern (Karten bleiben lesbar). So sind alle geladenen Generationen
sofort sichtbar und die Fläche wird genutzt, statt rechte Generationen
abzuschneiden. Mobil: Wurzel links, vertikal zentriert (Pan), damit die
Karten auf dem kleinen Schirm nicht winzig werden. ── */
const defaultView = useMemo<View | null>(() => {
if (!size) return null
const zoom = size.w < 520 ? 0.8 : 1
const isPhone = size.w < 520
let zoom = isPhone ? 0.8 : 1
if (!isPhone && datum) {
const extent = datumExtent(datum)
const width = extent.depth * NODE_X + CARD_W + 32
const height = extent.leaves * NODE_Y + 32
zoom = clamp(Math.min(1, size.w / width, size.h / height), ZOOM_MIN, ZOOM_MAX)
}
return {
zoom,
translate: { x: (CARD_W / 2) * zoom + 24, y: size.h / 2 },
}
}, [size])
}, [size, datum])
const [viewOverride, setViewOverride] = useState<(View & { forId: string }) | null>(null)
const view = viewOverride && viewOverride.forId === id ? viewOverride : defaultView

View File

@@ -171,7 +171,7 @@
.stammbaum-canvas {
flex: 1 1 auto;
min-width: 0;
height: clamp(18rem, 62dvh, 46rem);
height: clamp(18rem, 72dvh, 58rem);
border: 1px solid var(--color-border);
border-radius: 0.6rem;
background: