diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 2d4f5844bd1..dceefef6c36 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -94,7 +94,7 @@ export default {
 		},
 		previewSize: {
 			type: Number,
-			default: 128,
+			default: 384,
 		},
 		// In case this component is used to display a file that is being uploaded
 		// this parameter is used to access the file upload status in the store
@@ -162,9 +162,9 @@ export default {
 			}
 
 			const previewSize = Math.ceil(this.previewSize * window.devicePixelRatio)
-			return generateUrl('/core/preview?fileId={fileId}&x={width}&y={height}', {
+			// expand width but keep a max height
+			return generateUrl('/core/preview?fileId={fileId}&x=-1&y={height}&a=1', {
 				fileId: this.id,
-				width: previewSize,
 				height: previewSize,
 			})
 		},
@@ -290,14 +290,18 @@ export default {
 		object-fit: cover;
 	}
 
+	.loading {
+		display: inline-block;
+		width: 100%;
+		margin-left: 32px;
+	}
+
 	.preview {
-		display: block;
-		width: 128px;
-		height: 128px;
+		display: inline-block;
+		height: 384px;
 	}
 	.preview-64 {
-		display: block;
-		width: 64px;
+		display: inline-block;
 		height: 64px;
 	}
 
@@ -308,7 +312,6 @@ export default {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		margin-top: 4px;
 	}
 
 	&:not(.file-preview--viewer-available) {