Selected user: scale and align cross properly

IconButton makes assumptions about the size of icons, which
we're not abiding by here. That makes it semeingly impossible
to properly center our icon. Instead, rewrite it as a surface
to ensure it's laid out properly

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt

@@ -16,16 +16,20 @@
 
 package io.element.android.libraries.matrix.ui.components
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -38,7 +42,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
-import io.element.android.libraries.designsystem.theme.components.IconButton
+import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.user.MatrixUser
 import io.element.android.libraries.matrix.ui.model.getAvatarData
@@ -51,7 +55,9 @@ fun SelectedUser(
     modifier: Modifier = Modifier,
     onUserRemoved: (MatrixUser) -> Unit = {},
 ) {
-    Box(modifier = modifier.width(56.dp)) {
+    Box(modifier = modifier
+        .width(56.dp)
+    ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
@@ -63,18 +69,23 @@ fun SelectedUser(
                 style = MaterialTheme.typography.bodyLarge,
             )
         }
-        IconButton(
+        Surface(
+            color = MaterialTheme.colorScheme.primary,
             modifier = Modifier
                 .clip(CircleShape)
-                .background(MaterialTheme.colorScheme.primary)
                 .size(20.dp)
-                .align(Alignment.TopEnd),
-            onClick = { onUserRemoved(matrixUser) }
+                .align(Alignment.TopEnd)
+                .clickable(
+                    indication = rememberRipple(),
+                    interactionSource = remember { MutableInteractionSource() },
+                    onClick = { onUserRemoved(matrixUser) }
+                ),
         ) {
             Icon(
                 imageVector = Icons.Default.Close,
                 contentDescription = stringResource(id = StringR.string.action_remove),
                 tint = MaterialTheme.colorScheme.onPrimary,
+                modifier = Modifier.padding(2.dp)
             )
         }
     }