From 42a9bece366abf03533bca0ad6db6cd8de9e8269 Mon Sep 17 00:00:00 2001 From: Benjamin Sutter Date: Thu, 6 Aug 2026 15:13:17 +0200 Subject: [PATCH] fix(startseite): Belegschaft auf grossen Bildschirmen fassen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/components/staff/AgentStaffOverview.tsx | 24 +++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/staff/AgentStaffOverview.tsx b/src/components/staff/AgentStaffOverview.tsx index 63bd454..79669ba 100644 --- a/src/components/staff/AgentStaffOverview.tsx +++ b/src/components/staff/AgentStaffOverview.tsx @@ -23,6 +23,23 @@ const RESERVED_PX = TOP_BAR_PX + KEEP_VISIBLE_BELOW_PX /** Darunter würde die Belegschaft zur Briefmarke — dann lieber scrollen. */ 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). * @@ -63,9 +80,9 @@ export function AgentStaffOverview() { position: 'relative', display: 'flex', 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)': { - 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', }} @@ -78,6 +95,9 @@ export function AgentStaffOverview() { display: 'flex', flexDirection: 'column', height: '100%', + width: '100%', + maxWidth: MAX_CONTENT_PX, + mx: 'auto', px: { xs: 2.5, lg: 4 }, py: { xs: 2.5, lg: 3 }, gap: { xs: 2, lg: 2.5 },