Fix MainActionButton layout for long texts (#3158)

* Fix `MainActionButton` layout for long texts

* Update screenshots

---------

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

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(),

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b66bfca625a2c5abbb99eb63840c99d941331f74da6741203f382ee49fec29fa
+oid sha256:d2e96d71fd2e0e67415ab5d69b2712661f4e453980e202e60717cc73e1e3fa81
-size 45772
+size 45821

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_10_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:24d1b09fbf025b954711e4bd8392d32675568154bbd06ce8c69f4a8deb91a958
+oid sha256:1884020edf5182e4be0ef7408ae09d3ebdc79e4f482c0ed22c47864fb4ca3b6d
-size 43695
+size 43682

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_11_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:05d47c7317111c9e7ac34f66705a8344114501c35d05d630f2146e128300077d
+oid sha256:50940f08a015ca4ecbd4f88810b183d1632daa34e8f79c38017f20ad5a1ce90a
-size 42587
+size 42637

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_12_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e5491a9525166428c8b1ce94aaf3ef56aa5415cab19f8bcd99be128c265925e9
+oid sha256:259aced4d75ec473abf8f4fb41c3c734e69618a552b2cf0b9ceeb98d59deec25
-size 45669
+size 45717

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e1320dbc665a15434e9ea46bc8f085cb0a1dfe1a328d41139401ebd8ef23f84
+oid sha256:4885f85102e8e8a509586fb48e7a26d5ceb1dd7aa6897b955cb781eed87b9f30
-size 34975
+size 35023

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:42590cba46dc5f9e0d4e9504d1ea854c5f5f3fdf3acaddca2604988164153beb
+oid sha256:f6d8d1c7aa92f526398221aeff77cc44ebdad36bc4a1259ebb3c9635483af1f5
-size 37065
+size 37117

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:30e9d873c187481341222a986741061eb84162127d7e0d086d3c957d9ef2d2d8
+oid sha256:3679bf87660a8bd799ae9c4397266227a0f46559bdcae6ddecec0930d5c78e95
-size 35945
+size 35993

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:189e30f39a33924a6da727d4caa4ce117df66cc9dd1857c4909649cf8db51fdb
+oid sha256:0ae27c470cb9be1fa75b85b607bcc3666839801376e00b9c0ec8b86d229d907b
-size 43191
+size 43236

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_5_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cd1fee6b0af1818d9b0fb6809620fa8118b970f439ae75c504ffd4e172aa60d3
+oid sha256:ea6ba2ec613561a26331c72ca89a6bd44b96c160bee75bc9a9b9a06339426275
-size 41670
+size 41660

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cd1fee6b0af1818d9b0fb6809620fa8118b970f439ae75c504ffd4e172aa60d3
+oid sha256:ea6ba2ec613561a26331c72ca89a6bd44b96c160bee75bc9a9b9a06339426275
-size 41670
+size 41660

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a0f12af0b98d2d145d5443554a0657cd0699fe27f86447873630a189cbce615a
+oid sha256:bf9ea4e85c5dc2d9d5c609b29e6232a5932c9b3bee81c459e9214ac16f7a3764
-size 45008
+size 44986

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_8_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db2babbe88dd81723ecf8f1c83fa73042efb590d04f1b12aaabf102f7f576dd9
+oid sha256:569a0dfdc4c5c77f44999b0e9e7a1b2458cac6b01dfd56800d3e7c3b5f8c0347
-size 43883
+size 43930

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetailsDark_9_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:53056291448931a702d761557712626259f04a3969f128553a7bc7a172d74d5b
+oid sha256:45e0e9952c3ca0fb805b5e53b990c3ec54732a971ecc658e25ef73254b3f1ca4
-size 43840
+size 43871

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d69018133b9a3ebf36e7819031df2c8b8bc19f1e7632cfeabc02ca6bcf76ffce
+oid sha256:dcf1f93aa20a0acd4c32f761fdd39abf46016c84072f0a22c9b9cf0dd7f2c6f2
-size 46744
+size 46788

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_10_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:04a0838ac192efeacb821d23ed8b3ce8305b8e8084beb0e5a0fbc56cfa1ce964
+oid sha256:dc8fb59e77e8e09e79f5d89e039f302f28e2451faa025e9f1ce3b0ac48f75f8d
-size 44435
+size 44404

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_11_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6d760e5015257bd8d608749c1926c6177e4d0ef70d5d5f32764e970f4c80cb43
+oid sha256:e3166a62b24bfaf55d3dfa5d6e9fcd6dca2ee2789928efd66d8147e4e11d0ce0
-size 43331
+size 43377

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_12_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:63d2319dc4617d805f0b652983e4bb7b6e4aa7c2e9c6ec37398fce2e2413a79d
+oid sha256:f799d30b5c3d847cc8011ce4aefbb8710b34df8f11116842af035b05d233cfa1
-size 46441
+size 46485

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:374166110a04cee8f63d1d330601976970e5abcd92947cfb284e61613cf47f51
+oid sha256:09ce1743e0e3c5629fab6d0c2d06cc15be7229e446673b05f49f0e031a1c2823
-size 35727
+size 35776

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8c3dec8246e5605c61a9132cea048c5afaad35751246ffd81160c33782c26c93
+oid sha256:84ef09f2163f10a583853a52008f5a53f26c90350136a970fd55e0199f5fd47f
-size 37861
+size 37907

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c8491d21c160851bbe3a0362edae05e46cf9cb072ca4bf41ad569a3a6c57097c
+oid sha256:9941f55b35128067bd7560ed24d44bc0bbe8e13a6702d6ec2d35304462f755a2
-size 36458
+size 36503

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f7f08cac8eecb3ae6067f756411d0ec5607d3207832cfe69858ef1189f18ee45
+oid sha256:b300a88051346537beac5096895ef87b007e56fdddc33ad63db092f4c813a454
-size 43996
+size 44041

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_5_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5649302bb7468c7ec2214b509259df584574e52662eaca1782ad732c6c9ac659
+oid sha256:0fe90dffd26521d58e0956b9ea967c641f75a7cdeb39052abbfcdf85754c5dd3
-size 42296
+size 42281

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5649302bb7468c7ec2214b509259df584574e52662eaca1782ad732c6c9ac659
+oid sha256:0fe90dffd26521d58e0956b9ea967c641f75a7cdeb39052abbfcdf85754c5dd3
-size 42296
+size 42281

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ea0cfd0f222862a8becdd4b4a7f2e47a4a7d83ecb1ff761889c46631d7d43e97
+oid sha256:41b3d79ae55b26478c2e6d1910b37a98eb22ac37e9bfd3a33de4dc805e82028b
-size 45861
+size 45850

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_8_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cd7aa71f1d24d4cacafb4aaea8802d1493e317604d5ea35f0d9fac1a304d7f19
+oid sha256:02a966757cc01f8707738d3cd29d05df0bf3842069fec812c7223e2e29da5dbf
-size 44718
+size 44761

tests/uitests/src/test/snapshots/images/features.roomdetails.impl_RoomDetails_9_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:234e65b2caa1f23f9e4d0e01c142d22df0d407851e554a7db3e0b09c57acf47a
+oid sha256:5a2148c28660bd9fd3a45b1f06b331966f79c77166b40bb1b7afb5b926407817
-size 44626
+size 44647

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ac5b4e74ec63e7e8e6e61d3f7ffd731e0376eac278c2adce3582d1da02dafe1f
+oid sha256:c59e2c55e8527759765b7ca693e2f9f064de55590dd21831ad1f3d7c8c5ed929
-size 21262
+size 21261

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Day_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4a99ca956353e88e7358c372b0ddda72f3b1b9e558b55b4455122af109b6be5a
+oid sha256:fb865c555bf11c378b1d83969001c8bb32b56600203592ce94050de5db2db51d
-size 18957
+size 18990

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Day_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:071f13f5bbcf43b4e8a76c98749657daf4586a87d495fdcf605bf526496478eb
+oid sha256:effcb61375eca558758f9671e0fa77740f6d3d03993fd744ce8c9fe751c8959b
-size 21608
+size 21601

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Day_5_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f3a8dce72fa62a42d6c8e1fbcf875ff279c5e3dd17399d4e8b7e4a8e5298905b
+oid sha256:6b356948c8b3ad279d7e6c43dda56dcd6697c22843657be016b61a88a5693c71
-size 22173
+size 22167

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Day_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ff97b32f07dd179fb4c2685c793734fc0888978273d2330ab571347786d969bc
+oid sha256:6112f3060064ffbb1ee3099779ba1046d2665292c0ad2d9dfc2a615c4eb15066
-size 20522
+size 20497

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Day_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f0c300400dba60e0389f454465d14c22926ae224bbd7e93355dd74c7f73f4a6a
+oid sha256:6319c392d7f69702dcb1b148e31b3d13ffa9a2f728b01728727d3becbb4f51df
-size 22174
+size 22236

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Day_8_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ac5b4e74ec63e7e8e6e61d3f7ffd731e0376eac278c2adce3582d1da02dafe1f
+oid sha256:c59e2c55e8527759765b7ca693e2f9f064de55590dd21831ad1f3d7c8c5ed929
-size 21262
+size 21261

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a8bb7296cd22a4c882ec3e93b66b464754d5a58a2f855fe5253ba7b7a2660bfe
+oid sha256:d917407c9e62ad942301e74428c1b0691cc3088b903713d5fe6664c23bb8cb7e
 size 21124

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Night_1_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5179ae27b40a0611e8ac715e501b01e715ceb8f227d7b432652186f974f3f512
+oid sha256:f85b7926edabf510eef0d7f378e4066e99373593830ca902a47f8c12db771825
-size 18970
+size 18950

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Night_2_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c4e55ae6975324403f2067b3633ddc38c5abd98f092c5d48a9cede88d597193a
+oid sha256:c3ff4f065b6dd0550c1db5950923bb69421ecb6a7326d1a5621f2dec91d00ba7
-size 21469
+size 21462

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Night_5_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:54c198bbebdad2dc4110ca04d3a83b70d75557fb0872157c1724f339054d1234
+oid sha256:0b438fece9def5f6af510b65be50e209671f4d16a05c4e97c5397f73b25ab30f
-size 22020
+size 22018

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Night_6_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:65e816869277c12044991fb26427aac17d65072f1e0d7218b53583363a81024f
+oid sha256:a9bee8776293351621a63f10593eb5d718a3f60b577aaf5c1496c46219a61109
-size 19249
+size 19223

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Night_7_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:611ac8c529d73b14a73a73aeb7cec1eb1a50085d536bd700567462256df30974
+oid sha256:74566a2b227be7d781392517bb98c6e80040fa8e4c8d4c8ee781e8384d1d2c98
-size 22026
+size 21996

tests/uitests/src/test/snapshots/images/features.userprofile.shared_UserProfileView_Night_8_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a8bb7296cd22a4c882ec3e93b66b464754d5a58a2f855fe5253ba7b7a2660bfe
+oid sha256:d917407c9e62ad942301e74428c1b0691cc3088b903713d5fe6664c23bb8cb7e
 size 21124

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_MainActionButton_Buttons_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8939d2b25d57827c2441a03bbdd324548f93238ca5224d13f788e780297acbf3
+oid sha256:48b55e3d045eff0f2129394ea64bb5bc4962278a8feeb13323f5eed09d95596f
-size 13190
+size 22300