diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 7d8462eb5d7..746b8d819c9 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -282,8 +282,13 @@ export default { }, imageContainerStyle() { + // Uploaded image in temporary message (use actual image size) + if (this.previewType === PREVIEW_TYPE.TEMPORARY && !this.isUploadEditor) { + return {} + } + // Fallback for loading mimeicons (preview for audio files is not provided) - if (this.file['preview-available'] !== 'yes' || this.file.mimetype.startsWith('audio/')) { + if (this.file['preview-available'] !== 'yes' || this.file.mimetype.startsWith('audio/') || this.failed) { return { width: this.smallPreview ? '32px' : '128px', height: this.smallPreview ? '32px' : '128px', @@ -293,12 +298,9 @@ export default { const widthConstraint = this.smallPreview ? 32 : (this.mediumPreview ? 192 : 600) const heightConstraint = this.smallPreview ? 32 : (this.mediumPreview ? 192 : 384) - // Fallback when no metadata available + // Actual size when no metadata available if (!this.file.width || !this.file.height) { - return { - width: widthConstraint + 'px', - height: heightConstraint + 'px', - } + return {} } const sizeMultiplicator = Math.min( @@ -587,7 +589,7 @@ export default { .preview { border-radius: var(--border-radius); - max-width: 100%; + max-width: min(100%, 600px); max-height: 384px; }