diff --git a/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.test.tsx b/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.test.tsx index e9b807624c3f..94786e67a9a5 100644 --- a/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.test.tsx +++ b/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.test.tsx @@ -131,4 +131,22 @@ describe('MediaGallery', () => { expect(rows).toHaveClass('MediaGallery__rows--collapsed'); expect(rows).toHaveAttribute('aria-hidden', 'true'); }); + + it('renders a collapse toggle for a collapsed single video', async () => { + const onToggle = jest.fn(); + renderWithContext( + , + baseState, + ); + + const toggle = screen.getByRole('button', {name: /toggle media gallery/i}); + await userEvent.click(toggle); + expect(onToggle).toHaveBeenCalledWith('p1'); + }); }); diff --git a/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.tsx b/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.tsx index 5fe808bf4ad9..40399fef754e 100644 --- a/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.tsx +++ b/webapp/channels/src/components/file_attachment_list/media_gallery/media_gallery.tsx @@ -123,7 +123,9 @@ const MediaGallery = ({fileInfos, postId, compactDisplay, isEmbedVisible = true, ); const isSingle = tiles.length === 1; - const showHeader = !isSingle && Boolean(onToggleCollapse); + + // Collapsed single videos need a header, otherwise the tile disappears with no toggle. + const showHeader = Boolean(onToggleCollapse) && (!isSingle || !isEmbedVisible); let tileIdx = 0;