MrSphay/odysseus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix compressed gallery photo-detail metadata panel (#314)

Browse Source 
The photo-detail view is an absolutely-positioned (inset:0) overlay
inside .gallery-images-container, so its height resolved to the photo
grid sitting behind it. When the library has only a few photos that grid
is short, which crushed the detail view: the image was clipped and the
metadata sidebar (overflow-y:auto) was squeezed into a tiny,
internally-scrolling strip. With a large library the grid is tall, which
is why the panel looked fine in the demo video but cramped for users with
few photos.

When the detail view is open, hide the grid-view siblings and drop the
overlay into normal flow so the container -- and the window, up to its
existing 92vh max-height -- sizes to the detail's own content (image +
metadata). Nothing is clipped or squeezed regardless of how many photos
exist. Works on both desktop and the mobile full-screen sheet; the grid,
albums and editor views keep sizing to their own content.

Also add before/after comparison screenshots (docs/gallery-314-*.png).
This commit is contained in:
Zeus-Deus
2026-06-01 18:47:28 +02:00
parent 70a71f603c
commit afcdfd289d
3 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/gallery-314-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
docs/gallery-314-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

24
static/style.css
View File

@@ -16092,6 +16092,30 @@ body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.mod
.gallery-modal-content:has(#gallery-editor-container[style*="flex"]) { .gallery-modal-content:has(#gallery-editor-container[style*="flex"]) {
height: 92vh; height: 92vh;
} }
/* Photo-detail view sizing (issue #314).
The detail view is rendered as a `position:absolute; inset:0` overlay
*inside* `.gallery-images-container`, painted over the photo grid. Because
it's absolutely positioned it can't contribute to the container's height —
the container (and therefore the overlay's `inset:0` box) collapses to the
height of the grid sitting behind it. When the library only has a few
photos that grid is short, so the detail view is crushed: the image is
clipped and the metadata sidebar (`overflow-y:auto`) is squeezed into a
tiny, internally-scrolling strip. (With a large library the grid is tall,
which is why it looked fine in the demo video but cramped for users with
few photos.)
Fix: when the detail view is open, hide the grid-view siblings and drop the
overlay into normal flow. The container — and the window, up to its 92vh
max-height — then sizes to the detail's own content (image + metadata), so
nothing is clipped or squeezed regardless of how many photos exist. Scoped
via the detail element's inline `display:flex` so the grid / albums views
keep sizing to their own content. Works on both desktop and the mobile
full-screen sheet. */
#gallery-images-container:has(> #gallery-detail[style*="flex"]) > *:not(#gallery-detail) {
display: none !important;
}
#gallery-images-container:has(> #gallery-detail[style*="flex"]) > #gallery-detail {
position: static;
}
/* Containing block for the photo-detail overlay — keeps it inside the body /* Containing block for the photo-detail overlay — keeps it inside the body
so it sits below the modal header and the tab strip instead of covering them. */ so it sits below the modal header and the tab strip instead of covering them. */
.gallery-images-container { position: relative; } .gallery-images-container { position: relative; }