From b518a293cd65f78091426044849067073e8d8433 Mon Sep 17 00:00:00 2001 From: dtoro Date: Tue, 21 Apr 2026 22:15:38 +0200 Subject: [PATCH] fix(duplicates): reserve 160px row height so thumbnails don't shift on load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The group grid only pinned column width; rows defaulted to auto height, so each cell collapsed to the size of its still-empty and snapped to 160px once the thumbnail arrived — visible layout jump, plus the virtualizer re-measured every group on image load. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/components/duplicates/DuplicatesView.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/duplicates/DuplicatesView.tsx b/frontend/src/components/duplicates/DuplicatesView.tsx index b9fc5aa..91555bf 100644 --- a/frontend/src/components/duplicates/DuplicatesView.tsx +++ b/frontend/src/components/duplicates/DuplicatesView.tsx @@ -386,8 +386,12 @@ const DuplicateGroupSection = memo(function DuplicateGroupSection({ ref={gridRef} className="grid gap-1 p-2" style={{ - gridTemplateColumns: - 'repeat(auto-fill, 160px)', + // Fix both axes so each cell reserves a 160×160 box before + // its thumbnail finishes loading — otherwise rows collapse to + // the height of an empty and jump when images arrive, + // which also throws off the virtualizer's row-height measure. + gridTemplateColumns: 'repeat(auto-fill, 160px)', + gridAutoRows: '160px', }} > {group.members.map((member) => {