Ensure message bubble is .75f width screen ratio. Remove padding from LazyList and apply padding to content to ensure width is correctly computed.

Avoid using LocalConfiguration, its not working well with screenshot test.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

@@ -89,7 +89,7 @@ fun TimelineView(
             modifier = Modifier.fillMaxSize(),
             state = lazyListState,
             reverseLayout = true,
-            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
+            contentPadding = PaddingValues(vertical = 8.dp),
         ) {
             itemsIndexed(
                 items = state.timelineItems,

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

@@ -20,6 +20,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -31,10 +32,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition
@@ -50,6 +49,9 @@ import io.element.android.libraries.designsystem.theme.components.Text
 private val BUBBLE_RADIUS = 12.dp
 private val BUBBLE_INCOMING_OFFSET = 16.dp
 
+// Design says: The maximum width of a bubble is still 3/4 of the screen width
+private const val BUBBLE_WIDTH_RATIO = 0.75f
+
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun MessageEventBubble(
@@ -105,28 +107,29 @@ fun MessageEventBubble(
         }
     }
     val bubbleShape = bubbleShape()
-    Surface(
+    Box(
         modifier = modifier
-            .widthIn(min = 80.dp, max = bubbleMaxSize())
+            .fillMaxWidth(BUBBLE_WIDTH_RATIO)
-            .offsetForItem()
+            .padding(horizontal = 16.dp)
-            .clip(bubbleShape)
+            .offsetForItem(),
-            .combinedClickable(
+        // Need to repeat this if content width is low.
-                onClick = onClick,
+        contentAlignment = if (state.isMine) Alignment.CenterEnd else Alignment.CenterStart
-                onLongClick = onLongClick,
+    ) {
-                indication = rememberRipple(),
+        Surface(
-                interactionSource = interactionSource
+            modifier = Modifier
-            ),
+                .widthIn(min = 80.dp)
-        color = backgroundBubbleColor,
+                .clip(bubbleShape)
-        shape = bubbleShape,
+                .combinedClickable(
-        content = content
+                    onClick = onClick,
-    )
+                    onLongClick = onLongClick,
-}
+                    indication = rememberRipple(),
-
+                    interactionSource = interactionSource
-@Composable
+                ),
-fun bubbleMaxSize(): Dp {
+            color = backgroundBubbleColor,
-    // Design says: The maximum width of a bubble is still 3/4 of the screen width even with the new
+            shape = bubbleShape,
-    // timestamps
+            content = content
-    return LocalConfiguration.current.screenWidthDp.dp * 0.75f
+        )
+    }
 }
 
 @Preview

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

@@ -148,6 +148,7 @@ fun TimelineItemEventRow(
                 event.safeSenderName,
                 event.senderAvatar,
                 Modifier
+                    .padding(horizontal = 16.dp)
                     .align(Alignment.TopStart)
                     .clickable(onClick = ::onUserDataClicked)
             )
@@ -158,7 +159,7 @@ fun TimelineItemEventRow(
                 reactionsState = event.reactionsState,
                 modifier = Modifier
                     .align(if (event.isMine) Alignment.BottomEnd else Alignment.BottomStart)
-                    .padding(start = if (event.isMine) 0.dp else 20.dp)
+                    .padding(start = if (event.isMine) 16.dp else 36.dp, end = 16.dp)
             )
         }
     }