From 338bddb5473fa3b4f2c46ec264bf77d0711b2118 Mon Sep 17 00:00:00 2001
From: Manjusaka <me@manjusaka.me>
Date: Fri, 12 Jun 2026 00:28:41 +0800
Subject: [PATCH] fix(detail): stabilize the image area height to stop the
 per-switch layout jump
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The detail image area used `sm:max-h-[90vh]`, so it sized to each photo's
contained height — switching between photos of different aspect ratios changed
the row height every time, and the whole modal jumped/reflowed (measured CLS
~0.06; the remaining "flicker" on switch/load after the other fixes).

Make the image area a fixed `sm:h-[90vh]` box on desktop (carousel viewport and
slides fill it with `sm:h-full`); the image keeps `object-contain` and is centered,
so different aspect ratios now letterbox within a constant-height box instead of
resizing it. Height no longer changes on switch → CLS ≈ 0, no jump. Mobile is
unchanged (no `sm:` height → still sizes to content).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 components/album/preview-image.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/album/preview-image.tsx b/components/album/preview-image.tsx
index ec4ad726..6bb9122d 100644
--- a/components/album/preview-image.tsx
+++ b/components/album/preview-image.tsx
@@ -431,8 +431,12 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
     >
       <TransitionOverlay />
       <div className="relative h-full flex flex-col space-y-2 sm:grid sm:gap-4 sm:grid-cols-3 w-full">
-        <div className="show-up-motion relative sm:col-span-2 sm:flex sm:justify-center sm:max-h-[90vh] select-none">
-          <div className="overflow-hidden w-full" ref={emblaRef}>
+        {/* Fixed 90vh height on desktop (not max-h) so the image area never
+            resizes to each photo's aspect ratio — different aspects letterbox
+            within a constant box instead of changing the row height on every
+            switch (that height jump was the remaining "flicker"). CLS≈0. */}
+        <div className="show-up-motion relative sm:col-span-2 sm:flex sm:justify-center sm:h-[90vh] select-none">
+          <div className="overflow-hidden w-full sm:h-full" ref={emblaRef}>
             <div className="flex h-full">
               {photos.map((photo, i) => {
                 const near = Math.abs(i - index) <= loadRadius
@@ -441,7 +445,7 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
                   <div
                     key={photo.id}
                     data-flip-target={isCurrent ? '' : undefined}
-                    className="relative flex min-w-0 shrink-0 grow-0 basis-full items-center justify-center sm:max-h-[90vh]"
+                    className="relative flex min-w-0 shrink-0 grow-0 basis-full items-center justify-center sm:h-full"
                   >
                     {near ? (
                       photo.type === 1 ? (