diff --git a/CHANGELOG.md b/CHANGELOG.md index 516e9bda01..1255b07f24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,8 +12,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Posts: bot badge on statuses from bot accounts. ### Changed +- Chats: improved display of media attachments. ### Fixed +- Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load. +- Chats: don't display "copy" button for messages without text. - Posts: don't have to click the play button twice for embedded videos. - index.html: remove `referrer` meta tag so it doesn't conflict with backend's `Referrer-Policy` header. diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index cdf0321780..613a5eed0a 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -246,7 +246,7 @@ const ChatMessageList: React.FC = ({ chat }) => { const menu: Menu = []; - if (navigator.clipboard) { + if (navigator.clipboard && chatMessage.content) { menu.push({ text: intl.formatMessage(messages.copy), action: () => handleCopyText(chatMessage), @@ -312,39 +312,47 @@ const ChatMessageList: React.FC = ({ chat }) => { )} - -
- {maybeRenderMedia(chatMessage)} - -
-
+ {maybeRenderMedia(chatMessage)} + + {content && ( + +
+ +
+
+ )} + = ({ @@ -31,6 +32,7 @@ const UploadButton: React.FC = ({ resetFileKey, className = 'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500', iconClassName, + icon, }) => { const intl = useIntl(); const { configuration } = useInstance(); @@ -52,9 +54,11 @@ const UploadButton: React.FC = ({ return null; } - const src = onlyImages(attachmentTypes) - ? require('@tabler/icons/photo.svg') - : require('@tabler/icons/paperclip.svg'); + const src = icon || ( + onlyImages(attachmentTypes) + ? require('@tabler/icons/photo.svg') + : require('@tabler/icons/paperclip.svg') + ); return (
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 0c71a43ddc..aa79493b1d 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -2,6 +2,7 @@ box-sizing: border-box; overflow: hidden; border-radius: 10px; + isolation: isolate; position: relative; width: 100%; height: auto;