Set a fixed number of emojis per row. (#271)

features/verifysession/impl/build.gradle.kts

@@ -43,7 +43,6 @@ dependencies {
     implementation(projects.libraries.elementresources)
     implementation(projects.libraries.uiStrings)
     implementation(projects.libraries.statemachine)
-    implementation(libs.accompanist.flowlayout)
     api(projects.features.verifysession.api)
 
     testImplementation(libs.test.junit)

features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt

@@ -28,9 +28,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -43,13 +42,12 @@ import androidx.compose.ui.composed
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 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.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.google.accompanist.flowlayout.FlowRow
-import com.google.accompanist.flowlayout.MainAxisAlignment
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
@@ -60,6 +58,7 @@ import io.element.android.libraries.designsystem.theme.components.CircularProgre
 import io.element.android.libraries.designsystem.theme.components.Icon
 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.verification.VerificationEmoji
 import io.element.android.features.verifysession.impl.VerifySelfSessionState.VerificationStep as FlowStep
 import io.element.android.libraries.ui.strings.R as StringR
 
@@ -186,28 +185,38 @@ internal fun ContentWaiting(modifier: Modifier = Modifier) {
 
 @Composable
 internal fun ContentVerifying(verificationFlowStep: FlowStep.Verifying, modifier: Modifier = Modifier) {
-    FlowRow(
-        modifier = modifier
-            .fillMaxWidth()
-            .verticalScroll(rememberScrollState()),
-        mainAxisAlignment = MainAxisAlignment.Center,
-        mainAxisSpacing = 32.dp,
-        crossAxisSpacing = 40.dp
-    ) {
-        for (entry in verificationFlowStep.emojiList) {
-            Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                Text(entry.code, fontSize = 34.sp)
-                Spacer(modifier = Modifier.height(16.dp))
-                Text(
-                    entry.name,
-                    style = ElementTextStyles.Regular.bodyMD,
-                    color = MaterialTheme.colorScheme.secondary,
-                )
+    // We want each row to have up to 4 emojis
+    val rows = verificationFlowStep.emojiList.chunked(4)
+    Column(modifier = modifier.fillMaxWidth()) {
+        for ((rowIndex, emojis) in rows.withIndex()) {
+            // Vertical spacing between rows
+            if (rowIndex > 0) {
+                Spacer(modifier = Modifier.height(40.dp))
+            }
+            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
+                for (emoji in emojis) {
+                    EmojiItemView(emoji = emoji, modifier = Modifier.widthIn(max = 60.dp))
+                }
             }
         }
     }
 }
 
+@Composable
+internal fun EmojiItemView(emoji: VerificationEmoji, modifier: Modifier = Modifier) {
+    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier) {
+        Text(emoji.code, fontSize = 34.sp)
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            emoji.name,
+            style = ElementTextStyles.Regular.bodyMD,
+            color = MaterialTheme.colorScheme.secondary,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
 @Composable
 internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit) {
     val verificationViewState = screenState.verificationFlowStep

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_2,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:07bdafae7df342f2c7e1edc5dc0a37192dbed12d2c5933493aae3a3cac3b6bf9
-size 60781
+oid sha256:d8b4602bcc8c94d97593890a75fd57a254a06284a23a40b01003de52f124bf1a
+size 60972

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewDarkPreview_0_null_3,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5ac87ed5df471c7b001e39e97e5c00301f0a49ce0427c7c0d4db18484e3f79ba
-size 61373
+oid sha256:c5fb6945209cce3babc0da3741844c6aaca60c1219ceee868b0c1ac1ec791d20
+size 61551

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_2,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2501fb6f5abfe267171b88c5f522efb73666243828a3e8d7bfaa1a31e54bd278
-size 59284
+oid sha256:da2d7805db951c695d328cf856a7816ce5b02f67b81853d7bc7b88e651b493bb
+size 59493

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.verifysession.impl_null_DefaultGroup_VerifySelfSessionViewLightPreview_0_null_3,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:158ebaf8b90aac46a90ee6a70a0fab90f3bb8bf791aa1a180349d7d64e3d0847
-size 59712
+oid sha256:33540a80556d31ea3df29e6806cd45c1051678dd75d974c795a12f0d6634a6fe
+size 59913