Fix low width image message (#6692)

* fix low width image message

* added previews for narrow images

* Update screenshots
---------

Co-authored-by: ElementBot <android@element.io>

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt

@@ -58,6 +58,7 @@ import io.element.android.libraries.ui.utils.a11y.isTalkbackActive
 import io.element.android.wysiwyg.compose.EditorStyledText
 import io.element.android.wysiwyg.link.Link
 
+private const val TALL_IMAGE_RATIO_DIVISOR = 3
 @Composable
 fun TimelineItemImageView(
     content: TimelineItemImageContent,
@@ -79,7 +80,7 @@ fun TimelineItemImageView(
             Modifier
         }
         TimelineItemAspectRatioBox(
-            modifier = containerModifier.blurHashBackground(content.blurhash, alpha = 0.9f),
+            modifier = containerModifier.blurHashBackground(content.blurhash, alpha = 0.9f).align(Alignment.CenterHorizontally),
             aspectRatio = coerceRatioWhenHidingContent(content.aspectRatio, hideMediaContent),
         ) {
             ProtectedView(
@@ -123,7 +124,14 @@ fun TimelineItemImageView(
                 LocalContentColor provides ElementTheme.colors.textPrimary,
                 LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular
             ) {
-                val aspectRatio = content.aspectRatio ?: DEFAULT_ASPECT_RATIO
+                val width = content.width ?: 0
+                val height = content.height ?: 0
+                // if image is narrow and tall use DEFAULT_ASPECT_RATIO
+                val aspectRatio = if (width < height / TALL_IMAGE_RATIO_DIVISOR) {
+                    DEFAULT_ASPECT_RATIO
+                } else {
+                    content.aspectRatio ?: DEFAULT_ASPECT_RATIO
+                }
                 EditorStyledText(
                     modifier = Modifier
                         .padding(horizontal = 4.dp) // This is (12.dp - 8.dp) contentPadding from CommonLayout
@@ -200,3 +208,38 @@ internal fun TimelineImageWithCaptionRowPreview() = ElementPreview {
         )
     }
 }
+
+@PreviewsDayNight
+@Composable
+internal fun ATimelineItemEventRowPreview() = ElementPreview {
+    Column {
+        sequenceOf(false, true).forEach { isMine ->
+            ATimelineItemEventRow(
+                event = aTimelineItemEvent(
+                    isMine = isMine,
+                    content = aTimelineItemImageContent(
+                        filename = "image.jpg",
+                        caption = "A long caption that may wrap into several lines",
+                        width = 80,
+                        height = 300,
+                        aspectRatio = 80f / 300f,
+                    ),
+                    groupPosition = TimelineItemGroupPosition.Last,
+                ),
+            )
+        }
+        ATimelineItemEventRow(
+            event = aTimelineItemEvent(
+                isMine = false,
+                content = aTimelineItemImageContent(
+                    filename = "image.jpg",
+                    caption = "Narrow image with null aspectRatio",
+                    width = 80,
+                    height = 300,
+                    aspectRatio = null,
+                ),
+                groupPosition = TimelineItemGroupPosition.Last,
+            ),
+        )
+    }
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemImageContentProvider.kt

@@ -28,6 +28,8 @@ fun aTimelineItemImageContent(
     blurhash: String? = A_BLUR_HASH,
     filename: String = "A picture.jpg",
     caption: String? = null,
+    width: Int? = null,
+    height: Int? = 300,
 ) = TimelineItemImageContent(
     filename = filename,
     fileSize = 4 * 1024 * 1024L,
@@ -38,8 +40,8 @@ fun aTimelineItemImageContent(
     thumbnailSource = null,
     mimeType = MimeTypes.IMAGE_JPEG,
     blurhash = blurhash,
-    width = null,
-    height = 300,
+    width = width,
+    height = height,
     thumbnailWidth = null,
     thumbnailHeight = 150,
     aspectRatio = aspectRatio,

tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.event_ATimelineItemEventRow_Day_0_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:86eac241e9084cc830ff13d231908da2eb0dff246aa5cac64dddaac68a5d5f13
+size 295298

tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.event_ATimelineItemEventRow_Night_0_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:578a3707102c7754f607c3a14f94f32cafa30ee570db174386533c484cb4773c
+size 295031