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 },