nandi.uk
This repository has no description
feat: preserve collection card preview aspect ratio
author
pdelfan
date
(May 27, 2026, 11:39 AM -0700)
commit
f906c51f
f906c51fcf17c2a5b4a688d4fc79af65e8995d8d
parent
0a40cc77
0a40cc77aac7af7b3b0575a3093252dfe2d779cd
+74
-41
+54
-31
src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
+54
-31
src/webapp/features/collections/components/collectionCardPreview/CollectionCardPreview.tsx
···
1
-
import { AspectRatio, Card, Center, Grid, Text, Image } from '@mantine/core';
1
+
import {
2
+
AspectRatio,
3
+
Card,
4
+
Center,
5
+
Group,
6
+
Text,
7
+
Image,
8
+
Box,
9
+
ScrollAreaAutosize,
10
+
} from '@mantine/core';
11
+
import { useScroller } from '@mantine/hooks';
2
12
import useCollection from '../../lib/queries/useCollection';
3
13
import { useState } from 'react';
4
14
···
6
16
rkey: string;
7
17
handle: string;
8
18
}
19
+
20
+
const CARD_WIDTH = 120;
9
21
10
22
export default function CollectionCardPreview(props: Props) {
23
+
const scroller = useScroller();
11
24
const [imageError, setImageError] = useState(false);
12
25
13
26
const { data } = useCollection({
···
21
34
if (cards.length === 0) return null;
22
35
23
36
return (
24
-
<Grid gap={'xs'}>
25
-
{cards.map((c) => (
26
-
<Grid.Col key={c.id} span={3}>
27
-
{c.cardContent.imageUrl && !imageError ? (
28
-
<AspectRatio ratio={16 / 9}>
29
-
<Image
30
-
src={c.cardContent.imageUrl}
31
-
alt={`${c.cardContent.url} social preview image`}
32
-
radius={'md'}
33
-
mih={45}
34
-
w={'100%'}
35
-
onError={() => setImageError(true)}
36
-
/>
37
-
</AspectRatio>
38
-
) : (
39
-
<AspectRatio ratio={16 / 9}>
40
-
<Card p={'xs'} radius={'md'} mih={45} w={'100%'} withBorder>
41
-
<Center my={'auto'}>
42
-
<Text fz={8} fw={500} lineClamp={2}>
43
-
{c.cardContent.title ??
44
-
c.cardContent.description ??
45
-
c.cardContent.url}
46
-
</Text>
47
-
</Center>
48
-
</Card>
49
-
</AspectRatio>
50
-
)}
51
-
</Grid.Col>
52
-
))}
53
-
</Grid>
37
+
<Box
38
+
ref={scroller.ref}
39
+
{...scroller.dragHandlers}
40
+
style={{
41
+
overflowX: 'auto',
42
+
scrollbarWidth: 'none',
43
+
msOverflowStyle: 'none',
44
+
}}
45
+
>
46
+
<Group gap={'xs'} grow={cards.length > 2} wrap="nowrap">
47
+
{cards.map((c) => (
48
+
<Box key={c.id} w={CARD_WIDTH} miw={CARD_WIDTH}>
49
+
{c.cardContent.imageUrl && !imageError ? (
50
+
<AspectRatio ratio={16 / 9}>
51
+
<Image
52
+
src={c.cardContent.imageUrl}
53
+
alt={`${c.cardContent.url} social preview image`}
54
+
radius={'md'}
55
+
fit="cover"
56
+
draggable={false}
57
+
onError={() => setImageError(true)}
58
+
/>
59
+
</AspectRatio>
60
+
) : (
61
+
<AspectRatio ratio={16 / 9}>
62
+
<Card p={'xs'} radius={'md'} withBorder>
63
+
<Center my={'auto'}>
64
+
<Text fz={8} fw={500} lineClamp={2}>
65
+
{c.cardContent.title ??
66
+
c.cardContent.description ??
67
+
c.cardContent.url}
68
+
</Text>
69
+
</Center>
70
+
</Card>
71
+
</AspectRatio>
72
+
)}
73
+
</Box>
74
+
))}
75
+
</Group>
76
+
</Box>
54
77
);
55
78
}
+20
-10
src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
+20
-10
src/webapp/features/collections/components/collectionCardPreview/Skeleton.CollectionCardPreview.tsx
···
1
-
import { AspectRatio, Grid, GridCol, Skeleton } from '@mantine/core';
1
+
import { AspectRatio, Box, Group, Skeleton } from '@mantine/core';
2
+
3
+
const CARD_WIDTH = 120;
2
4
3
5
export default function CollectionCardPreviewSkeleton() {
4
6
return (
5
-
<Grid gap={'xs'}>
6
-
{Array.from({ length: 4 }).map((_, i) => (
7
-
<GridCol key={i} span={3}>
8
-
<AspectRatio ratio={16 / 9}>
9
-
<Skeleton radius={'md'} h={45} w={'100%'} />
10
-
</AspectRatio>
11
-
</GridCol>
12
-
))}
13
-
</Grid>
7
+
<Box
8
+
style={{
9
+
overflowX: 'auto',
10
+
scrollbarWidth: 'none',
11
+
msOverflowStyle: 'none',
12
+
}}
13
+
>
14
+
<Group gap={'xs'} grow wrap="nowrap">
15
+
{Array.from({ length: 4 }).map((_, i) => (
16
+
<Box key={i} w={CARD_WIDTH} miw={CARD_WIDTH}>
17
+
<AspectRatio ratio={16 / 9}>
18
+
<Skeleton radius={'md'} />
19
+
</AspectRatio>
20
+
</Box>
21
+
))}
22
+
</Group>
23
+
</Box>
14
24
);
15
25
}