elektrine/elektrine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): stop image modal over-zooming photos
All checks were successful
Deploy Docker Images / Build, push, and deploy (push) Successful in 17m3s
Details

Browse source 
Cap lightbox media with viewport units only; content-sized % max-height
was invalidating constraints so images painted full-size and got clipped.
This commit is contained in:
maxfield 2026-08-04 15:38:45 -04:00
parent 43dd32c607
commit 2198031b95
2 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

24
apps/elektrine/assets/css/components.css
View file

@ -350,11 +350,14 @@ html[data-theme="light"] .select:hover { border-color: color-mix(in srgb, var(--
} /* Do not set max-width here: unlayered rules beat Tailwind max-w-* utilities.
DaisyUI supplies a default ~32rem; authors opt into larger sizes with max-w-*. */
.modal-box { position: relative; isolation: isolate; border-radius: 0.75rem !important; animation: modal-pop 0.2s ease-out;
} /* Media lightbox: near-viewport width/height for full-size images/videos. */
} /* Media lightbox: fit the image up to near-viewport size. Never use
max-height percentages here — parent height is content-sized, so % is
indefinite and min(88dvh, 100%) can invalidate the whole declaration,
leaving the image at natural size and clipped by overflow (looks zoomed). */
.modal-box.modal-box--media {
width: min(96dvw, 90rem);
width: fit-content;
max-width: min(96dvw, 90rem);
max-height: min(96dvh, 100%);
max-height: 96dvh;
padding: 0;
overflow: hidden;
display: flex;
@ -362,8 +365,8 @@ html[data-theme="light"] .select:hover { border-color: color-mix(in srgb, var(--
}
.modal-box.modal-box--media .image-modal-media {
flex: 1 1 auto;
min-height: min(50dvh, 20rem);
max-height: min(88dvh, 100%);
min-height: 0;
max-height: 88dvh;
display: flex;
align-items: center;
justify-content: center;
@ -371,16 +374,19 @@ html[data-theme="light"] .select:hover { border-color: color-mix(in srgb, var(--
}
.modal-box.modal-box--media .image-modal-media img,
.modal-box.modal-box--media .image-modal-media video {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: min(88dvh, 100%);
max-width: min(96dvw, 90rem);
max-height: 88dvh;
object-fit: contain;
}
.modal-box.modal-box--media:has(.image-modal-footer) .image-modal-media,
.modal-box.modal-box--media:has(.image-modal-footer) .image-modal-media {
max-height: 78dvh;
}
.modal-box.modal-box--media:has(.image-modal-footer) .image-modal-media img,
.modal-box.modal-box--media:has(.image-modal-footer) .image-modal-media video {
max-height: min(78dvh, 100%);
max-height: 78dvh;
}
.modal-action { flex-wrap: wrap;
} @keyframes modal-pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); }

13
apps/elektrine_social/lib/elektrine_social_web/components/ui/image_modal.ex
View file

@ -174,7 +174,12 @@ defmodule ElektrineSocialWeb.Components.UI.ImageModal do
<.icon name="hero-photo" class="w-16 h-16 opacity-40" />
</div>
<% video_url?(@safe_media_url) -> %>
<video src={@safe_media_url} controls preload="metadata">
<video
src={@safe_media_url}
controls
preload="metadata"
class="h-auto w-auto max-h-[88dvh] max-w-full object-contain"
>
Your browser does not support the video tag.
</video>
<% audio_url?(@safe_media_url) -> %>
@ -190,7 +195,11 @@ defmodule ElektrineSocialWeb.Components.UI.ImageModal do
</audio>
</div>
<% true -> %>
<img src={@safe_media_url} alt="Full size image" />
<img
src={@safe_media_url}
alt="Full size image"
class="h-auto w-auto max-h-[88dvh] max-w-full object-contain"
/>
<% end %>
</div>