From eeb288e2dc47b26d298f81ed9562fb2504745cc3 Mon Sep 17 00:00:00 2001 From: Tommaso Casaburi Date: Tue, 31 Mar 2026 17:46:01 +0700 Subject: [PATCH] fix(catalog): avoid stretching unknown-size thumbnails --- .../__tests__/catalog-row.test.tsx | 19 +++++++++++++++++++ src/components/catalog-row/catalog-row.tsx | 5 +++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/catalog-row/__tests__/catalog-row.test.tsx b/src/components/catalog-row/__tests__/catalog-row.test.tsx index 6b52cc4a..ee7b4241 100644 --- a/src/components/catalog-row/__tests__/catalog-row.test.tsx +++ b/src/components/catalog-row/__tests__/catalog-row.test.tsx @@ -271,6 +271,8 @@ describe('CatalogRow', () => { expect(wrapper?.style.border).toContain('red'); expect(frameImage).toBeTruthy(); + expect(frameImage?.getAttribute('width')).toBe('150'); + expect(frameImage?.getAttribute('height')).toBe('75'); await act(async () => { frameImage?.dispatchEvent(new Event('error', { bubbles: true })); @@ -322,6 +324,23 @@ describe('CatalogRow', () => { expect(container.querySelector('video[src="https://example.com/file.mp4#t=0.001"]')).toBeTruthy(); }); + it('does not force square dimensions on images when media metadata is missing', async () => { + await act(async () => { + root.render( + createElement(CatalogPostMedia, { + cid: 'image-post', + commentMediaInfo: { type: 'image', url: 'https://example.com/file.png' }, + }), + ); + }); + + const image = container.querySelector('img[src="https://example.com/file.png"]'); + + expect(image).toBeTruthy(); + expect(image?.getAttribute('width')).toBeNull(); + expect(image?.getAttribute('height')).toBeNull(); + }); + it('renders media posts with board links, counts, and hover previews in all view', async () => { testState.directories = [{ address: 'music-posting.eth', features: { requirePostLinkIsMedia: true }, title: '/mu/ - Music' }]; testState.linkCount = 2; diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index 0e59f9fd..fb219118 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -63,8 +63,9 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight displayHeight = '54px'; } - const numericWidth = parseInt(displayWidth) || undefined; - const numericHeight = parseInt(displayHeight) || undefined; + const hasKnownMediaDimensions = Boolean(linkWidth && linkHeight); + const numericWidth = hasKnownMediaDimensions ? parseInt(displayWidth) || undefined : undefined; + const numericHeight = hasKnownMediaDimensions ? parseInt(displayHeight) || undefined : undefined; const maxWidth = imageSize === 'Large' ? '250px' : '150px'; const maxHeight = imageSize === 'Large' ? '250px' : '150px';