fix: You saved it right screen reset button covers words

app/src/main/java/com/brainwallet/ui/composable/SeedWordItem.kt

@@ -14,15 +14,13 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.Typography
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -32,18 +30,12 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.PopupProperties
-import com.brainwallet.ui.screens.welcome.WelcomeScreen
 import com.brainwallet.ui.theme.BrainwalletTheme
 import com.brainwallet.ui.theme.chilli
 
@@ -56,10 +48,14 @@ fun SeedWordItem(
 ) {
     SeedWordItemBox(modifier = modifier) {
         Text(
-            modifier = Modifier.padding(vertical = 12.dp),
+            modifier = Modifier
+                .padding(vertical = 12.dp)
+                .weight(1f),
             text = label,
             style = MaterialTheme.typography.bodyMedium,
-            color = if (isError) chilli else BrainwalletTheme.colors.content
+            color = if (isError) chilli else BrainwalletTheme.colors.content,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1
         )
         trailingIcon?.let { icon ->
             Spacer(modifier = Modifier.width(8.dp))

app/src/main/java/com/brainwallet/ui/composable/SeedWordsLayout.kt

@@ -0,0 +1,27 @@
+package com.brainwallet.ui.composable
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun SeedWordsLayout(
+    modifier: Modifier = Modifier,
+    content: LazyGridScope.() -> Unit
+) {
+    LazyVerticalGrid(
+        modifier = modifier
+            .height(220.dp),
+        columns = GridCells.Fixed(3), //fixed 3
+        contentPadding = PaddingValues(8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        content = content
+    )
+}

app/src/main/java/com/brainwallet/ui/screens/yourseedproveit/YourSeedProveItScreen.kt

@@ -9,27 +9,24 @@ import android.content.ClipData
 import android.content.ClipDescription
 import android.media.MediaPlayer
 import android.view.View
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.draganddrop.dragAndDropSource
 import androidx.compose.foundation.draganddrop.dragAndDropTarget
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.itemsIndexed
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -60,6 +57,7 @@ import com.brainwallet.ui.composable.BrainwalletScaffold
 import com.brainwallet.ui.composable.BrainwalletTopAppBar
 import com.brainwallet.ui.composable.LargeButton
 import com.brainwallet.ui.composable.SeedWordItem
+import com.brainwallet.ui.composable.SeedWordsLayout
 import org.koin.compose.koinInject
 
 @Composable
@@ -72,7 +70,7 @@ fun YourSeedProveItScreen(
     val context = LocalContext.current
 
     /// Layout values
-    val columnPadding = 18
+    val columnPadding = 12
     val horizontalVerticalSpacing = 8
     val spacerHeight = 48
     val maxItemsPerRow = 3
@@ -104,23 +102,12 @@ fun YourSeedProveItScreen(
                     }
                 })
         },
-        floatingActionButton = {
-            if (state.orderCorrected.not()) {
-                FloatingActionButton(
-                    onClick = {
-                        viewModel.onEvent(YourSeedProveItEvent.OnClear)
-                    }
-                ) {
-                    Icon(Icons.Default.Clear, contentDescription = null)
-                }
-            }
-        }
     ) { paddingValues ->
         Column(
             modifier = Modifier
+                .fillMaxSize()
                 .padding(paddingValues)
                 .padding(columnPadding.dp)
-                .fillMaxSize()
                 .verticalScroll(rememberScrollState()),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
@@ -138,17 +125,10 @@ fun YourSeedProveItScreen(
                 )
             )
 
-            Spacer(modifier = Modifier.height(spacerHeight.dp))
-
-            FlowRow(
-                modifier = Modifier
-                    .fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
-                verticalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
-                maxItemsInEachRow = maxItemsPerRow
-            ) {
-                state.correctSeedWords.values.forEachIndexed { index, (expectedWord, actualWord) ->
+            Spacer(modifier = Modifier.weight(0.1f))
 
+            SeedWordsLayout {
+                itemsIndexed(items = state.correctSeedWords.values.toList()) { index: Int, (expectedWord, actualWord): SeedWordItem ->
                     val label = if (expectedWord != actualWord && actualWord.isEmpty()) {
                         "${index + 1}"
                     } else {
@@ -158,7 +138,6 @@ fun YourSeedProveItScreen(
                     SeedWordItem(
                         modifier = Modifier
                             .fillMaxWidth()
-                            .weight(1f)
                             .dragAndDropTarget(
                                 shouldStartDragAndDrop = { event ->
                                     event
@@ -195,17 +174,20 @@ fun YourSeedProveItScreen(
 
             Spacer(modifier = Modifier.weight(1f))
 
-            AnimatedVisibility(visible = state.orderCorrected.not()) {
-                FlowRow(
-                    modifier = Modifier
-                        .fillMaxWidth(),
-                    horizontalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
-                    verticalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
-                    maxItemsInEachRow = maxItemsPerRow
-                ) {
-                    state.shuffledSeedWords.forEachIndexed { index, word ->
+            SeedWordsLayout {
+                itemsIndexed(items = state.shuffledSeedWords) { index, word ->
+
+                    val isWordUsedCorrectly =
+                        state.correctSeedWords.values.any { (expectedWord, actualWord) ->
+                            expectedWord == word && actualWord == word
+                        }
+
+                    if (isWordUsedCorrectly) {
+                        Box(modifier = Modifier.fillMaxWidth())
+                    } else {
                         SeedWordItem(
                             modifier = Modifier
+                                .fillMaxWidth()
                                 .dragAndDropSource {
                                     detectTapGestures(
                                         onLongPress = {
@@ -230,20 +212,25 @@ fun YourSeedProveItScreen(
                             }
                         )
                     }
+
+
                 }
             }
 
-            AnimatedVisibility(visible = state.orderCorrected) {
-                LargeButton(
-                    onClick = {
+
+            LargeButton(
+                onClick = {
+                    if (state.orderCorrected) {
                         onNavigate.invoke(UiEffect.Navigate(Route.TopUp))
-                    },
-                ) {
-                    Text(
-                        text = stringResource(R.string.game_and_sync),
-                        style = MaterialTheme.typography.labelLarge
-                    )
-                }
+                    } else {
+                        viewModel.onEvent(YourSeedProveItEvent.OnClear)
+                    }
+                },
+            ) {
+                Text(
+                    text = stringResource(if (state.orderCorrected) R.string.game_and_sync else R.string.reset_start_over).uppercase(),
+                    style = MaterialTheme.typography.labelLarge
+                )
             }
 
         }

app/src/main/java/com/brainwallet/ui/screens/yourseedwords/YourSeedWordsScreen.kt

@@ -5,12 +5,11 @@ package com.brainwallet.ui.screens.yourseedwords
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.itemsIndexed
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -36,6 +35,7 @@ import com.brainwallet.ui.composable.BrainwalletScaffold
 import com.brainwallet.ui.composable.BrainwalletTopAppBar
 import com.brainwallet.ui.composable.LargeButton
 import com.brainwallet.ui.composable.SeedWordItem
+import com.brainwallet.ui.composable.SeedWordsLayout
 import org.koin.compose.koinInject
 
 @Composable
@@ -45,12 +45,11 @@ fun YourSeedWordsScreen(
     viewModel: YourSeedWordsViewModel = koinInject()
 ) {
     /// Layout values
-    val columnPadding = 16
+    val columnPadding = 12
     val horizontalVerticalSpacing = 8
-    val spacerHeight = 48
-    val maxItemsPerRow = 3
-    val leadingCopyPadding = 16
-    val detailLineHeight = 28
+    val spacerHeight = 36
+    val leadingCopyPadding = 8
+    val detailLineHeight = 24
 
     LaunchedEffect(Unit) {
         viewModel.uiEffect.collect { effect ->
@@ -78,9 +77,9 @@ fun YourSeedWordsScreen(
     ) { paddingValues ->
         Column(
             modifier = Modifier
+                .fillMaxSize()
                 .padding(paddingValues)
                 .padding(columnPadding.dp)
-                .fillMaxSize()
                 .verticalScroll(rememberScrollState()),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
@@ -102,16 +101,10 @@ fun YourSeedWordsScreen(
                 )
             )
 
-            Spacer(modifier = Modifier.height(spacerHeight.dp))
+            Spacer(modifier = Modifier.weight(0.1f))
 
-            FlowRow(
-                modifier = Modifier
-                    .fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
-                verticalArrangement = Arrangement.spacedBy(horizontalVerticalSpacing.dp),
-                maxItemsInEachRow = maxItemsPerRow
-            ) {
-                seedWords.forEachIndexed { index, word ->
+            SeedWordsLayout(modifier = Modifier.weight(1f)) {
+                itemsIndexed(items = seedWords) { index, word ->
                     SeedWordItem(
                         modifier = Modifier
                             .fillMaxWidth()
@@ -121,14 +114,14 @@ fun YourSeedWordsScreen(
                 }
             }
 
-            Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.weight(0.1f))
 
             Text(
                 text = stringResource(R.string.blockchain_litecoin),
                 style = MaterialTheme.typography.bodyMedium.copy(textAlign = TextAlign.Center)
             )
 
-            Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.weight(0.2f))
 
             LargeButton(
                 onClick = {

app/src/main/res/values/strings.xml

@@ -855,4 +855,5 @@
 
     <string name="bottom_nav_item_buy_receive_title">Buy / Receive</string>
     <string name="custom">Custom</string>
+    <string name="reset_start_over">Reset / Start Over</string>
 </resources>