diff --git a/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap b/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap index ea1563bbf8c..e176816913b 100644 --- a/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap +++ b/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap @@ -64,7 +64,7 @@ exports[`PostMessagePreview direct and group messages should render preview for >
{ diff --git a/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap b/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap index ad77aa4d8c8..9c2b3bc67d1 100644 --- a/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap +++ b/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap @@ -127,6 +127,25 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
`; +exports[`components/post_view/ShowMore should match snapshot, PostMessageView on collapsed view with ellipsis overflow 1`] = ` +
+
+
+ +
+
+`; + exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view 1`] = `
`; + +exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view with ellipsis overflow 1`] = ` +
+
+
+ +
+
+`; diff --git a/webapp/channels/src/components/post_view/show_more/show_more.test.tsx b/webapp/channels/src/components/post_view/show_more/show_more.test.tsx index aaaad38e920..cb3a361b100 100644 --- a/webapp/channels/src/components/post_view/show_more/show_more.test.tsx +++ b/webapp/channels/src/components/post_view/show_more/show_more.test.tsx @@ -82,6 +82,36 @@ describe('components/post_view/ShowMore', () => { expect(container).toMatchSnapshot(); }); + test('should match snapshot, PostMessageView on collapsed view with ellipsis overflow', () => { + const ref = React.createRef(); + const {container} = renderWithContext( + , + ); + act(() => { + ref.current?.setState({isOverflow: true, isCollapsed: true}); + }); + expect(container).toMatchSnapshot(); + }); + + test('should match snapshot, PostMessageView on expanded view with ellipsis overflow', () => { + const ref = React.createRef(); + const {container} = renderWithContext( + , + ); + act(() => { + ref.current?.setState({isOverflow: true, isCollapsed: false}); + }); + expect(container).toMatchSnapshot(); + }); + test('should match snapshot, PostMessageView on expanded view with compactDisplay', () => { const ref = React.createRef(); const {container} = renderWithContext( diff --git a/webapp/channels/src/components/post_view/show_more/show_more.tsx b/webapp/channels/src/components/post_view/show_more/show_more.tsx index bf5c5b067da..df9241dcf33 100644 --- a/webapp/channels/src/components/post_view/show_more/show_more.tsx +++ b/webapp/channels/src/components/post_view/show_more/show_more.tsx @@ -114,8 +114,10 @@ export default class ShowMore extends React.PureComponent { let className = 'post-message'; let collapsedMaxHeightStyle: number | undefined; if (isCollapsed) { - collapsedMaxHeightStyle = this.maxHeight; className += ' post-message--collapsed'; + if (!(overflowType === 'ellipsis' && isOverflow)) { + collapsedMaxHeightStyle = this.maxHeight; + } } else { className += ' post-message--expanded'; }