Fix MainActionButton layout for long texts (#3158)

* Fix `MainActionButton` layout for long texts

* Update screenshots

---------

Co-authored-by: ElementBot <[email protected]>

Author: jmartinesp

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/MainActionButton.kt

@@ -18,12 +18,12 @@ package io.element.android.libraries.designsystem.components.button
 
 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.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.LocalContentColor
@@ -33,6 +33,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.Hyphens
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
@@ -61,7 +64,7 @@ fun MainActionButton(
                 onClick = onClick,
                 indication = ripple
             )
-            .widthIn(min = 76.dp),
+            .widthIn(min = 76.dp, max = 96.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         val tintColor = if (enabled) LocalContentColor.current else MaterialTheme.colorScheme.secondary
@@ -73,8 +76,10 @@ fun MainActionButton(
         Spacer(modifier = Modifier.height(14.dp))
         Text(
             title,
-            style = ElementTheme.typography.fontBodyMdMedium,
+            style = ElementTheme.typography.fontBodyMdMedium.copy(hyphens = Hyphens.Auto),
             color = tintColor,
+            overflow = TextOverflow.Visible,
+            textAlign = TextAlign.Center,
         )
     }
 }
@@ -89,13 +94,20 @@ internal fun MainActionButtonPreview() {
 
 @Composable
 private fun ContentsToPreview() {
-    Row(Modifier.padding(10.dp)) {
+    Row(
+        modifier = Modifier.padding(10.dp),
+        horizontalArrangement = Arrangement.spacedBy(20.dp)
+    ) {
         MainActionButton(
             title = "Share",
             imageVector = CompoundIcons.ShareAndroid(),
             onClick = { },
         )
-        Spacer(modifier = Modifier.width(20.dp))
+        MainActionButton(
+            title = "Share with a long text",
+            imageVector = CompoundIcons.ShareAndroid(),
+            onClick = { },
+        )
         MainActionButton(
             title = "Share",
             imageVector = CompoundIcons.ShareAndroid(),