Bubble max width to 3/4 of the screen width

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

@@ -31,8 +31,10 @@ 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
@@ -105,7 +107,7 @@ fun MessageEventBubble(
     val bubbleShape = bubbleShape()
     Surface(
         modifier = modifier
-            .widthIn(min = 80.dp)
+            .widthIn(min = 80.dp, max = bubbleMaxSize())
             .offsetForItem()
             .clip(bubbleShape)
             .combinedClickable(
@@ -120,6 +122,13 @@ fun MessageEventBubble(
     )
 }
 
+@Composable
+fun bubbleMaxSize(): Dp {
+    // Design says: The maximum width of a bubble is still 3/4 of the screen width even with the new
+    // timestamps
+    return LocalConfiguration.current.screenWidthDp.dp * 0.75f
+}
+
 @Preview
 @Composable
 internal fun MessageEventBubbleLightPreview(@PreviewParameter(BubbleStateProvider::class) state: BubbleState) =

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

@@ -31,7 +31,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
@@ -127,8 +126,6 @@ fun TimelineItemEventRow(
                 interactionSource = interactionSource,
                 onClick = onClick,
                 onLongClick = onLongClick,
-                modifier = Modifier
-                    .widthIn(max = 320.dp)
             ) {
                 MessageEventBubbleContent(
                     event = event,
@@ -460,7 +457,7 @@ private fun ContentTimestampToPreview(event: TimelineItem.Event) {
         val oldContent = event.content as TimelineItemTextContent
         listOf(
             "Text",
-            "Text longer but displayed on 1 line",
+            "Text longer, displayed on 1 line",
             "Text which should be rendered on several lines",
         ).forEach { str ->
             listOf(false, true).forEach { useDocument ->