diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 1f8c2bd20e..d6662c8617 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -583,7 +583,6 @@ bottom: -10px; } - border-radius: 16px; line-height: 0; overflow: hidden; @@ -596,18 +595,10 @@ &--with-content-below { margin-bottom: 7px; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; } &--with-content-above { margin-top: 4px; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - } - - .module-message__container--gif & { - border-radius: inherit; } } diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx index 358d0bbfe4..54f5297548 100644 --- a/ts/components/conversation/Message.stories.tsx +++ b/ts/components/conversation/Message.stories.tsx @@ -717,6 +717,44 @@ story.add('Image', () => { return renderBothDirections(props); }); +story.add('Multiple Images', () => { + const props = createProps({ + attachments: [ + { + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + fileName: 'tina-rolf-269345-unsplash.jpg', + contentType: IMAGE_JPEG, + width: 128, + height: 128, + }, + { + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + fileName: 'tina-rolf-269345-unsplash.jpg', + contentType: IMAGE_JPEG, + width: 128, + height: 128, + }, + { + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + fileName: 'tina-rolf-269345-unsplash.jpg', + contentType: IMAGE_JPEG, + width: 128, + height: 128, + }, + { + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + fileName: 'tina-rolf-269345-unsplash.jpg', + contentType: IMAGE_JPEG, + width: 128, + height: 128, + }, + ], + status: 'sent', + }); + + return renderBothDirections(props); +}); + story.add('Image with Caption', () => { const props = createProps({ attachments: [