Change the way ExtraPadding is computing to take into account the size of the font which will be used to render the space chars.

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

@@ -18,17 +18,19 @@ package io.element.android.features.messages.impl.timeline.components.event
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.TextUnit
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
 import io.element.android.libraries.core.bool.orFalse
 import io.element.android.libraries.matrix.api.timeline.item.event.EventSendState
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
 // Allow to not overlap the timestamp with the text, in the message bubble.
 // Compute the size of the worst case.
-data class ExtraPadding(val str: String)
+data class ExtraPadding(val nbChars: Int)
 
-val noExtraPadding = ExtraPadding("")
+val noExtraPadding = ExtraPadding(0)
 
 /**
  * See [io.element.android.features.messages.impl.timeline.components.TimelineEventTimestampView] for the related View.
@@ -40,22 +42,30 @@ fun TimelineItem.Event.toExtraPadding(): ExtraPadding {
     val hasMessageSendingFailed = sendState is EventSendState.SendingFailed
     val isMessageEdited = (content as? TimelineItemTextBasedContent)?.isEdited.orFalse()
 
-    var strLen = 2
+    var strLen = 6
     if (isMessageEdited) {
-        strLen += stringResource(id = CommonStrings.common_edited_suffix).length + 2
+        strLen += stringResource(id = CommonStrings.common_edited_suffix).length + 3
     }
     strLen += formattedTime.length
     if (hasMessageSendingFailed) {
         strLen += 5
+        if (isMessageEdited) {
+            // I do not know why, but adding 2 more chars avoid overlapping when the
+            // message is edited and in error.
+            strLen += 2
+        }
     }
-    // A space and a few unbreakable spaces
-    return ExtraPadding(" " + "\u00A0".repeat(strLen))
+    return ExtraPadding(strLen)
 }
 
-fun ExtraPadding.strBigger(): String {
-    return if (str.isEmpty()) {
-        str
-    } else {
-        str + "\u00A0\u00A0\u00A0"
-    }
+/**
+ * Get a string to add to the content of the message to avoid overlapping the timestamp.
+ * @param fontSize the font size of the message content, to be able to add more space char if the font is small.
+ */
+fun ExtraPadding.getStr(fontSize: TextUnit): String {
+    if (nbChars == 0) return ""
+    val timestampFontSize = ElementTheme.typography.fontBodyXsRegular.fontSize // 11.sp
+    val nbOfSpaces = ((timestampFontSize.value / fontSize.value) * nbChars).toInt() + 1
+    // A space and some unbreakable spaces
+    return " " + "\u00A0".repeat(nbOfSpaces)
 }

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

@@ -79,7 +79,7 @@ fun TimelineItemFileView(
                 overflow = TextOverflow.Ellipsis
             )
             Text(
-                text = content.fileExtensionAndSize + extraPadding.str,
+                text = content.fileExtensionAndSize + extraPadding.getStr(12.sp),
                 color = ElementTheme.materialColors.secondary,
                 fontSize = 12.sp,
                 maxLines = 1,

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

@@ -60,7 +60,7 @@ fun TimelineItemInformativeView(
             color = MaterialTheme.colorScheme.secondary,
             fontSize = 14.sp,
             // Since the font size is smaller, add more space to extra padding, to not overlap with the timestamp
-            text = text + extraPadding.strBigger()
+            text = text + extraPadding.getStr(14.sp)
         )
     }
 }

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

@@ -33,6 +33,7 @@ import androidx.compose.ui.text.buildAnnotatedString
 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.sp
 import androidx.core.text.util.LinkifyCompat
 import io.element.android.features.messages.impl.timeline.components.html.HtmlDocument
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
@@ -71,7 +72,9 @@ fun TimelineItemTextView(
             val linkStyle = SpanStyle(
                 color = LinkColor,
             )
-            val styledText = remember(content.body) { content.body.linkify(linkStyle) + extraPadding.str.toAnnotatedString() }
+            val styledText = remember(content.body) {
+                content.body.linkify(linkStyle) + extraPadding.getStr(16.sp).toAnnotatedString()
+            }
             ClickableLinkText(
                 text = styledText,
                 linkAnnotationTag = "URL",
@@ -123,7 +126,7 @@ fun ContentToPreview(content: TimelineItemTextBasedContent) {
     TimelineItemTextView(
         content = content,
         interactionSource = MutableInteractionSource(),
-        extraPadding = ExtraPadding(" (padding)"),
+        extraPadding = ExtraPadding(nbChars = 8),
     )
 }