diff --git a/docs/gallery-314-desktop.png b/docs/gallery-314-desktop.png
new file mode 100644
index 0000000..ac3d80f
Binary files /dev/null and b/docs/gallery-314-desktop.png differ
diff --git a/docs/gallery-314-mobile.png b/docs/gallery-314-mobile.png
new file mode 100644
index 0000000..3a3d71a
Binary files /dev/null and b/docs/gallery-314-mobile.png differ
diff --git a/static/style.css b/static/style.css
index 52c7c70..8d06e4d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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"]) {
   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
    so it sits below the modal header and the tab strip instead of covering them. */
 .gallery-images-container { position: relative; }