re-adjust height again to use calculated height instead of estimated

This commit is contained in:
jeffvli
2026-07-14 16:56:41 -07:00
parent 76ab05c544
commit 9c41e7cc70
3 changed files with 24 additions and 19 deletions
@@ -1,10 +1,11 @@
.container { .container {
box-sizing: border-box;
display: flex; display: flex;
gap: var(--theme-spacing-sm); gap: var(--theme-spacing-sm);
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 var(--theme-spacing-xs); padding: var(--theme-spacing-sm) var(--theme-spacing-xs);
} }
.container.vertical { .container.vertical {
@@ -397,13 +397,14 @@ export function estimateAlbumGroupContentHeight({
metadataRowCount: number; metadataRowCount: number;
showControls: boolean; showControls: boolean;
}): number { }): number {
// Prefer a single title line for the pre-measure floor. Wrapped titles are
// picked up by the measured content height after mount.
const TITLE_LINE_HEIGHT = 20; const TITLE_LINE_HEIGHT = 20;
const TITLE_MAX_LINES = 3;
const METADATA_LINE_HEIGHT = 18; const METADATA_LINE_HEIGHT = 18;
const CONTROLS_HEIGHT = 38; const CONTROLS_HEIGHT = 38;
return ( return (
TITLE_LINE_HEIGHT * TITLE_MAX_LINES + TITLE_LINE_HEIGHT +
Math.max(0, metadataRowCount) * METADATA_LINE_HEIGHT + Math.max(0, metadataRowCount) * METADATA_LINE_HEIGHT +
(showControls ? CONTROLS_HEIGHT : 0) (showControls ? CONTROLS_HEIGHT : 0)
); );
@@ -455,7 +456,8 @@ export function getAlbumGroupRowCount(
return end - start + 1; return end - start + 1;
} }
export const ALBUM_GROUP_STACK_GAP = 12; export const ALBUM_GROUP_STACK_GAP = 8;
export const ALBUM_GROUP_CELL_PADDING = 8;
export function getAlbumGroupSpanHeight( export function getAlbumGroupSpanHeight(
groupRowCount: number, groupRowCount: number,
@@ -466,16 +468,22 @@ export function getAlbumGroupSpanHeight(
): number { ): number {
const rowSpanHeight = groupRowCount * baseHeight; const rowSpanHeight = groupRowCount * baseHeight;
const isVertical = options?.isVertical ?? false; const isVertical = options?.isVertical ?? false;
const paddingY = ALBUM_GROUP_CELL_PADDING * 2;
if (isVertical) { if (isVertical) {
const imageSize = albumGroupImageSize > 0 ? albumGroupImageSize : 96; const imageSize = albumGroupImageSize > 0 ? albumGroupImageSize : 96;
return Math.max(rowSpanHeight, imageSize + ALBUM_GROUP_STACK_GAP + contentHeight); return Math.max(
rowSpanHeight,
imageSize + ALBUM_GROUP_STACK_GAP + contentHeight + paddingY,
);
} }
const imageSpanHeight = const imageSpanHeight =
albumGroupImageSize > 0 ? Math.max(albumGroupImageSize, rowSpanHeight) : rowSpanHeight; albumGroupImageSize > 0
? Math.max(albumGroupImageSize + paddingY, rowSpanHeight)
: rowSpanHeight;
return Math.max(imageSpanHeight, contentHeight); return Math.max(imageSpanHeight, contentHeight > 0 ? contentHeight + paddingY : 0);
} }
export function getAlbumGroupStartRowIndex( export function getAlbumGroupStartRowIndex(
@@ -605,12 +613,10 @@ function getAlbumGroupClampHeight(props: ItemTableListInnerColumn): null | numbe
const measuredContentHeight = groupHeightKey const measuredContentHeight = groupHeightKey
? props.albumGroupContentHeights?.get(groupHeightKey) ? props.albumGroupContentHeights?.get(groupHeightKey)
: undefined; : undefined;
// Never reserve less than the estimate — early measure can miss the async // Prefer measured info height once available. The controls row keeps a
// favorites/ratings row (AlbumGroupControls returns null until album loads). // min-height placeholder while the album query loads, so early measures
const contentHeight = Math.max( // already reserve favorites/ratings space.
measuredContentHeight ?? 0, const contentHeight = measuredContentHeight ?? props.estimatedAlbumGroupContentHeight ?? 0;
props.estimatedAlbumGroupContentHeight ?? 0,
);
const totalGroupHeight = getAlbumGroupSpanHeight( const totalGroupHeight = getAlbumGroupSpanHeight(
groupRowCount, groupRowCount,
baseHeight, baseHeight,
@@ -1464,12 +1464,10 @@ const BaseItemTableList = ({
const measuredContentHeight = groupHeightKey const measuredContentHeight = groupHeightKey
? cellProps.albumGroupContentHeights?.get(groupHeightKey) ? cellProps.albumGroupContentHeights?.get(groupHeightKey)
: undefined; : undefined;
// Prefer measured height when present; otherwise reserve with a stable // Prefer measured info height once available; otherwise reserve with a
// estimate so newly virtualized groups do not jump after mount measure. // stable estimate so newly virtualized groups do not jump after mount.
const contentHeight = Math.max( // Controls-row min-height covers favorites/ratings before the album loads.
measuredContentHeight ?? 0, const contentHeight = measuredContentHeight ?? estimatedAlbumGroupContentHeight;
estimatedAlbumGroupContentHeight,
);
const totalGroupHeight = getAlbumGroupSpanHeight( const totalGroupHeight = getAlbumGroupSpanHeight(
groupRowCount, groupRowCount,
baseHeight, baseHeight,