fix compact image sizing

This commit is contained in:
jeffvli
2025-12-03 04:15:16 -08:00
parent 917bf91583
commit 0b5b554eec
2 changed files with 24 additions and 3 deletions
@@ -1,11 +1,26 @@
.skeleton { .skeleton {
width: initial; width: 100%;
aspect-ratio: 1 / 1; height: 100%;
border-radius: 0;
}
.compact-image-container .skeleton {
border-radius: 0;
} }
.compact-image-container { .compact-image-container {
width: 100%; width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
border-radius: var(--theme-radius-md);
}
.compact-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 0;
} }
.image-container-with-aspect-ratio { .image-container-with-aspect-ratio {
@@ -109,7 +109,13 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
return ( return (
<TableColumnContainer {...props}> <TableColumnContainer {...props}>
<div
className={clsx(styles.imageContainer, {
[styles.compactImageContainer]: props.size === 'compact',
})}
>
<Skeleton containerClassName={styles.skeleton} /> <Skeleton containerClassName={styles.skeleton} />
</div>
</TableColumnContainer> </TableColumnContainer>
); );
}; };