fix(startseite): Belegschaft auf grossen Bildschirmen fassen

Auf 2560×1440 sah die Startseite schlecht aus, und der Fehler war meiner: die
Prüfung reichte nur bis 1920 px. Darüber lief nichts mehr auf Anschlag.

Zwei Ursachen:

Die Karten hatten keine Breitengrenze. Bei drei Spalten ohne Deckel wurden sie
auf 2560 px rund 733 px breit bei 207 px Höhe, auf einem Ultrawide sogar
1027 px — flache Streifen, in denen zwei Textzeilen verloren stehen. Der
Inhalt ist jetzt auf 1280 px gefasst und mittig gestellt, die Karten bleiben
damit auf jeder Breite rund 395 px. Der Hintergrund bleibt randlos.

Die Höhe wuchs unbegrenzt mit dem Viewport, während die Karten ihre
Inhaltshöhe behielten. Auf einem 1440er Monitor stand dadurch über und unter
den Karten ein halber Bildschirm leere dunkle Fläche. Die Höhe ist jetzt auf
760 px gedeckelt. Der Titel «Meine Objekte» bleibt sichtbar — er rückt nach
oben, und mehr von der Objektliste wird sichtbar.

Geprüft über neun Auflösungen von 1366×641 bis 3440×1440, jeweils fünf Karten
vollständig sichtbar, keine Überlappung, kein Innenscroll, Titel und
«Filter & Übersicht» im Viewport. Dazu 433 Tests, Typecheck, Build, ESLint,
Token-Schwelle (889/925).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-08-06 15:13:17 +02:00
parent 093a958dcf
commit 42a9bece36
+22 -2
View File
@@ -23,6 +23,23 @@ const RESERVED_PX = TOP_BAR_PX + KEEP_VISIBLE_BELOW_PX
/** Darunter würde die Belegschaft zur Briefmarke — dann lieber scrollen. */ /** Darunter würde die Belegschaft zur Briefmarke — dann lieber scrollen. */
const MIN_SCENE_PX = 420 const MIN_SCENE_PX = 420
/**
* Obergrenze der Höhe. Ohne sie wächst der Bereich auf hohen Schirmen mit der
* Viewport-Höhe mit, während die Karten ihre Inhaltshöhe behalten — auf einem
* 1440er Monitor stand über und unter den Karten ein halber Bildschirm leere
* dunkle Fläche. Der Titel «Meine Objekte» bleibt auch mit Deckel sichtbar; er
* rückt lediglich weiter nach oben, und mehr von der Objektliste wird sichtbar.
*/
const MAX_SCENE_PX = 760
/**
* Grösste Breite der Karten samt Anriss. Freilaufend würden bei drei Spalten
* auf einem 2560er Monitor Karten von über 700 Pixeln entstehen — flache
* Streifen, in denen zwei Textzeilen verloren stehen. Der Hintergrund bleibt
* randlos, nur der Inhalt wird gefasst und mittig gestellt.
*/
const MAX_CONTENT_PX = 1280
/** /**
* Die digitale Belegschaft auf der Startseite (Runde 5, §3). * Die digitale Belegschaft auf der Startseite (Runde 5, §3).
* *
@@ -63,9 +80,9 @@ export function AgentStaffOverview() {
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
height: `max(${MIN_SCENE_PX}px, calc(100vh - ${RESERVED_PX}px))`, height: `clamp(${MIN_SCENE_PX}px, calc(100vh - ${RESERVED_PX}px), ${MAX_SCENE_PX}px)`,
'@supports (height: 100dvh)': { '@supports (height: 100dvh)': {
height: `max(${MIN_SCENE_PX}px, calc(100dvh - ${RESERVED_PX}px))`, height: `clamp(${MIN_SCENE_PX}px, calc(100dvh - ${RESERVED_PX}px), ${MAX_SCENE_PX}px)`,
}, },
overflow: 'hidden', overflow: 'hidden',
}} }}
@@ -78,6 +95,9 @@ export function AgentStaffOverview() {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
height: '100%', height: '100%',
width: '100%',
maxWidth: MAX_CONTENT_PX,
mx: 'auto',
px: { xs: 2.5, lg: 4 }, px: { xs: 2.5, lg: 4 },
py: { xs: 2.5, lg: 3 }, py: { xs: 2.5, lg: 3 },
gap: { xs: 2, lg: 2.5 }, gap: { xs: 2, lg: 2.5 },