mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:01:08 +02:00
bd559e739e
Feedback on the previous lightbox: the image was capped at 60vh inside a bordered card, with metadata + action buttons stacked underneath in their own panel. Result: ~40% of the modal surface was chrome around a small picture, and the eye landed on the card edge before the actual generation. The user asked for image-first: fill the height, no module border, gray text in the bottom-right corner. New layout: - Borderless backdrop. The card frame is gone; the image sits directly on a near-black overlay (rgba(0,0,0,0.92)) so nothing competes for the eye. - Image fills the available area via `max-h-full max-w-full object-contain` inside a flex-center wrapper, with 6/10-rem outer padding so the picture doesn't kiss the viewport edges on small screens. - Metadata moves to a small grey overlay in the bottom-right corner — prompt on top, then a single inline detail line (model · dimensions · date) separated by middle dots. Right- aligned so longer prompts wrap toward the image edge instead of the centre. - Close becomes a circular icon-button in the top-right (X), no longer a footer button. ESC + backdrop-click still close. - Caller-supplied actions (the `actions` snippet) move to the bottom-left so they don't fight the meta block visually. Colour treatment uses literal white-alpha + black-alpha values in a scoped `<style>` block instead of theme tokens. The lightbox always sits on a literal near-black backdrop regardless of which theme is active, so theme-aware muted tokens would render too dark in light themes. The validator's brand-literal escape hatch (see scripts/validate-theme-utilities.mjs comment) covers this exact case. Empty-state (publicUrl missing) gets a small SquaresFour icon in a soft white-alpha tile so the modal still has a visible centre when an image fails to load. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| api | ||
| calc/packages/shared | ||
| calendar | ||
| cards | ||
| chat | ||
| citycorners | ||
| contacts | ||
| context | ||
| docs | ||
| food | ||
| guides | ||
| inventory | ||
| mana | ||
| manavoxel | ||
| memoro | ||
| moodlit | ||
| mukke | ||
| news | ||
| photos | ||
| picture | ||
| plants | ||
| presi | ||
| questions | ||
| quotes/packages/content | ||
| skilltree | ||
| storage | ||
| times | ||
| todo | ||
| traces | ||
| uload | ||