diff --git a/apps/web/src/components/dashboard/widget-registry.test.tsx b/apps/web/src/components/dashboard/widget-registry.test.tsx index 1d5a03a..fe5822a 100644 --- a/apps/web/src/components/dashboard/widget-registry.test.tsx +++ b/apps/web/src/components/dashboard/widget-registry.test.tsx @@ -66,7 +66,7 @@ describe('WIDGET_CONSTRAINTS (DASH-11)', () => { calculator: { minW: 3, minH: 10, defaultW: 6, defaultH: 10 }, favorites: { minW: 3, minH: 3, defaultW: 6, defaultH: 10 }, stopwatch: { minW: 4, minH: 3, defaultW: 6, defaultH: 6 }, - 'picture-frame': { minW: 4, minH: 4, defaultW: 8, defaultH: 8 }, + 'picture-frame': { minW: 4, minH: 4, defaultW: 8, defaultH: 12 }, }); let counted = 0; diff --git a/apps/web/src/components/dashboard/widget-registry.tsx b/apps/web/src/components/dashboard/widget-registry.tsx index 41bbf56..63bc7da 100644 --- a/apps/web/src/components/dashboard/widget-registry.tsx +++ b/apps/web/src/components/dashboard/widget-registry.tsx @@ -55,10 +55,11 @@ export const WIDGET_CONSTRAINTS: Record< calculator: { minW: 3, minH: 10, defaultW: 6, defaultH: 10 }, favorites: { minW: 3, minH: 3, defaultW: 6, defaultH: 10 }, stopwatch: { minW: 4, minH: 3, defaultW: 6, defaultH: 6 }, - // quick-260921-pi9: ein Bild braucht Flaeche — 8x8 ist ein Quadrat von der - // Groesse einer halben Notiz (6x8 -> 8x8), 4x4 die kleinste Kachel, in der - // Bild und Unterschrift-Streifen noch erkennbar sind. - 'picture-frame': { minW: 4, minH: 4, defaultW: 8, defaultH: 8 }, + // quick-260921-pi9: ein Bild braucht Flaeche — 8x12 entspricht der + // Kalender-Vorgabe (rund 530x330 px, Querformat wie ein Foto); 8x8 war im + // Browser-Rundgang mit 216 px Hoehe zu flach. 4x4 ist die kleinste Kachel, + // in der Bild und Unterschrift-Streifen noch erkennbar sind. + 'picture-frame': { minW: 4, minH: 4, defaultW: 8, defaultH: 12 }, }; /** diff --git a/apps/web/src/components/dashboard/widgets/picture-frame-lightbox.tsx b/apps/web/src/components/dashboard/widgets/picture-frame-lightbox.tsx index f3d337b..7ec5a07 100644 --- a/apps/web/src/components/dashboard/widgets/picture-frame-lightbox.tsx +++ b/apps/web/src/components/dashboard/widgets/picture-frame-lightbox.tsx @@ -1,6 +1,7 @@ 'use client'; import { useEffect, useRef } from 'react'; +import { createPortal } from 'react-dom'; import { useTranslations } from 'next-intl'; interface PictureFrameLightboxProps { @@ -21,6 +22,12 @@ interface PictureFrameLightboxProps { * `referrerPolicy="no-referrer"` auch hier (T-PI9-09): ein Fremdhost erfaehrt * die Tessera-Adresse nicht. Die Unterschrift ist ein React-Textknoten, * kein HTML (T-PI9-06). + * + * Gerendert per `createPortal` in `document.body` (wie der Kalender-Tooltip): + * die Kachel liegt in einem `react-grid-item` mit CSS-`transform`, und ein + * transformierter Vorfahr macht sich fuer `position: fixed` zum Bezugsrahmen — + * ohne Portal waere die Grossansicht auf die Kachelflaeche beschraenkt + * (im Browser-Rundgang am 21.09.2026 so gesehen: Dialog 531x216 statt Viewport). */ export function PictureFrameLightbox({ src, caption, onClose }: PictureFrameLightboxProps) { const t = useTranslations('widgets'); @@ -38,7 +45,9 @@ export function PictureFrameLightbox({ src, caption, onClose }: PictureFrameLigh return () => document.removeEventListener('keydown', handleKeyDown); }, [onClose]); - return ( + if (typeof document === 'undefined') return null; + + return createPortal(