diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx index 5b476065a0..dff2329f7a 100644 --- a/web/packages/new/photos/pages/duplicates.tsx +++ b/web/packages/new/photos/pages/duplicates.tsx @@ -392,7 +392,7 @@ const Duplicates: React.FC = ({ ...deduplicateButtonProps }) => ( - + {({ width, height }) => ( = ({ const itemCount = duplicateGroups.length; const itemSize = (index: number) => { - // The height of the header is driven by the height of the Checkbox, and - // currently it is always a fixed 42 px high. - const headerHeight = 42; + // The height of the header is driven by the height of the Checkbox, + // which is 42px high. The rest of the height comes from the fixed + // paddings on the header and the row itself. + const headerHeight = 20 + 42 + 8; + const paddingBlockEnd = 8; const duplicateGroup = duplicateGroups[index]!; const rowCount = Math.ceil( @@ -462,7 +464,7 @@ const DuplicatesList: React.FC = ({ ); const rowHeight = layoutParams.itemHeight + layoutParams.gap; - return headerHeight + rowCount * rowHeight; + return headerHeight + rowCount * rowHeight + paddingBlockEnd; }; const itemData = { layoutParams, duplicateGroups, onToggleSelection }; @@ -485,7 +487,7 @@ const ListItem: React.FC> = const onChange = () => onToggleSelection(index); return ( - + > = alignItems: "center", marginInline: 1, paddingInline: `${layoutParams.paddingInline}px`, + paddingBlock: "20px 8px", }} >