Fix timeline item padding and corners (#573)

* Try to fix timeline offsets and rounded corners.
---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

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

@@ -20,6 +20,7 @@ import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -86,7 +87,8 @@ fun TimelineView(
         LazyColumn(
             modifier = Modifier.fillMaxSize(),
             state = lazyListState,
-            reverseLayout = true
+            reverseLayout = true,
+            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
         ) {
             itemsIndexed(
                 items = state.timelineItems,

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

@@ -45,7 +45,8 @@ import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 
-private val BUBBLE_RADIUS = 16.dp
+private val BUBBLE_RADIUS = 12.dp
+private val BUBBLE_INCOMING_OFFSET = 16.dp
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
@@ -88,7 +89,7 @@ fun MessageEventBubble(
         return if (state.isMine) {
             this
         } else {
-            offset(x = 20.dp)
+            offset(x = BUBBLE_INCOMING_OFFSET)
         }
     }
 
@@ -135,8 +136,8 @@ private fun ContentToPreview(state: BubbleState) {
     Box(
         modifier = Modifier
             .size(width = 240.dp, height = 64.dp)
-            .padding(8.dp),
-        contentAlignment = Alignment.CenterStart,
+            .padding(vertical = 8.dp),
+        contentAlignment = if (state.isMine) Alignment.CenterEnd else Alignment.CenterStart,
     ) {
         MessageEventBubble(
             state = state,

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

@@ -101,9 +101,6 @@ fun TimelineItemEventRow(
         contentAlignment = parentAlignment
     ) {
         Row {
-            if (!event.isMine) {
-                Spacer(modifier = Modifier.width(4.dp))
-            }
             Column(horizontalAlignment = contentAlignment) {
                 if (event.showSenderInformation) {
                     MessageSenderInformation(
@@ -144,9 +141,6 @@ fun TimelineItemEventRow(
                         .offset(x = if (event.isMine) 0.dp else 20.dp, y = -(4.dp))
                 )
             }
-            if (event.isMine) {
-                Spacer(modifier = Modifier.width(16.dp))
-            }
         }
     }
     if (event.groupPosition.isNew()) {