Reply : fix reply cropped in timeline

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

@@ -101,7 +101,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.timeline.item.event.ProfileTimelineDetails
-import io.element.android.libraries.matrix.ui.messages.reply.InReplyToBox
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToView
 import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import io.element.android.libraries.matrix.ui.messages.reply.eventId
 import io.element.android.libraries.testtags.TestTags
@@ -551,7 +551,7 @@ private fun MessageEventBubbleContent(
                 .clip(RoundedCornerShape(6.dp))
                 // FIXME when a node is clickable, its contents won't be added to the semantics tree of its parent
                 .clickable(onClick = inReplyToClick)
-            InReplyToBox(inReplyTo, modifier = inReplyToModifier)
+            InReplyToView(inReplyTo, modifier = inReplyToModifier)
         }
         if (inReplyToDetails != null) {
             // Use SubComposeLayout only if necessary as it can have consequences on the performance.

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToView.kt

@@ -18,7 +18,6 @@ package io.element.android.libraries.matrix.ui.messages.reply
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -38,10 +37,13 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
 import io.element.android.libraries.designsystem.icons.CompoundDrawables
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.UserId
@@ -53,24 +55,23 @@ import io.element.android.libraries.matrix.ui.messages.sender.SenderNameMode
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
-fun InReplyToBox(
+fun InReplyToView(
     inReplyTo: InReplyToDetails,
     modifier: Modifier = Modifier,
 ) {
-    Box(modifier = modifier) {
+    when (inReplyTo) {
-        when (inReplyTo) {
+        is InReplyToDetails.Ready -> {
-            is InReplyToDetails.Ready -> {
+            ReplyToReadyContent(
-                ReplyToReadyContent(
+                senderId = inReplyTo.senderId,
-                    senderId = inReplyTo.senderId,
+                senderProfile = inReplyTo.senderProfile,
-                    senderProfile = inReplyTo.senderProfile,
+                metadata = inReplyTo.metadata(),
-                    metadata = inReplyTo.metadata(),
+                modifier = modifier
-                )
+            )
-            }
-            is InReplyToDetails.Error ->
-                ReplyToErrorContent(data = inReplyTo)
-            is InReplyToDetails.Loading ->
-                ReplyToLoadingContent()
         }
+        is InReplyToDetails.Error ->
+            ReplyToErrorContent(data = inReplyTo, modifier = modifier)
+        is InReplyToDetails.Loading ->
+            ReplyToLoadingContent(modifier = modifier)
     }
 }
 
@@ -87,17 +88,17 @@ private fun ReplyToReadyContent(
         PaddingValues(horizontal = 12.dp, vertical = 4.dp)
     }
     Row(
-            modifier
+        modifier
-                    .background(MaterialTheme.colorScheme.surface)
+            .background(MaterialTheme.colorScheme.surface)
-                    .padding(paddings)
+            .padding(paddings)
     ) {
         if (metadata is InReplyToMetadata.Thumbnail) {
             AttachmentThumbnail(
                 info = metadata.attachmentThumbnailInfo,
                 backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
                 modifier = Modifier
-                        .size(36.dp)
+                    .size(36.dp)
-                        .clip(RoundedCornerShape(4.dp))
+                    .clip(RoundedCornerShape(4.dp))
             )
             Spacer(modifier = Modifier.width(8.dp))
         }
@@ -122,9 +123,9 @@ private fun ReplyToLoadingContent(
 ) {
     val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
     Row(
-            modifier
+        modifier
-                    .background(MaterialTheme.colorScheme.surface)
+            .background(MaterialTheme.colorScheme.surface)
-                    .padding(paddings)
+            .padding(paddings)
     ) {
         Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
             PlaceholderAtom(width = 80.dp, height = 12.dp)
@@ -140,9 +141,9 @@ private fun ReplyToErrorContent(
 ) {
     val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
     Row(
-            modifier
+        modifier
-                    .background(MaterialTheme.colorScheme.surface)
+            .background(MaterialTheme.colorScheme.surface)
-                    .padding(paddings)
+            .padding(paddings)
     ) {
         Text(
             text = data.message,
@@ -195,3 +196,9 @@ private fun ReplyToContentText(metadata: InReplyToMetadata?) {
         )
     }
 }
+
+@PreviewsDayNight
+@Composable
+internal fun InReplyToViewPreview(@PreviewParameter(provider = InReplyToDetailsProvider::class) inReplyTo: InReplyToDetails) = ElementPreview {
+    InReplyToView(inReplyTo)
+}

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt

@@ -20,13 +20,10 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
@@ -35,18 +32,14 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToView
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
-import io.element.android.libraries.matrix.ui.messages.reply.InReplyToBox
 import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -128,7 +121,7 @@ private fun ReplyToModeView(
             .background(MaterialTheme.colorScheme.surface)
             .padding(4.dp)
     ) {
-        InReplyToBox(inReplyTo = replyToDetails, modifier = Modifier.weight(1f))
+        InReplyToView(inReplyTo = replyToDetails, modifier = Modifier.weight(1f))
         Icon(
             imageVector = CompoundIcons.Close(),
             contentDescription = stringResource(CommonStrings.action_close),