fix(quick-260921-pi9): Grossansicht per Portal, "1 Minute" statt "1 Minuten", Kachel-Vorgabe 8x12

Befunde aus dem Browser-Rundgang am 21.09.2026:

- Die Grossansicht lag in einem `react-grid-item` mit CSS-`transform`; ein
  transformierter Vorfahr wird fuer `position: fixed` zum Bezugsrahmen, der
  Dialog war deshalb auf die Kachelflaeche (531x216) beschraenkt statt den
  Viewport zu fuellen. Jetzt per `createPortal` in `document.body`, wie der
  Kalender-Tooltip.
- Wechselintervall "1 Minuten" -> ICU-Plural (`one {# Minute}`), de + en; der
  Formular-Test nutzt dafuer den echten `createTranslator` von next-intl auf
  der echten de.json statt eines `{n}`-Ersatzes.
- Standardgroesse 8x8 (216 px hoch) war zu flach fuer ein Foto -> 8x12 wie die
  Kalender-Vorgabe.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-21 19:10:52 +02:00
parent c3b45974f5
commit 8bf3601a18
6 changed files with 28 additions and 21 deletions
@@ -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(
<div className="fixed inset-0 z-50 flex items-center justify-center">
<button
type="button"
@@ -93,6 +102,7 @@ export function PictureFrameLightbox({ src, caption, onClose }: PictureFrameLigh
</p>
)}
</div>
</div>
</div>,
document.body,
);
}