Allow scroll in the "Enter recovery key" screen. #3042

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyView.kt

@@ -55,6 +55,7 @@ fun SecureBackupEnterRecoveryKeyView(
 
     FlowStepPage(
         modifier = modifier,
+        isScrollable = true,
         onBackClick = onBackClick,
         iconStyle = BigIcon.Style.Default(CompoundIcons.KeySolid()),
         title = stringResource(id = R.string.screen_recovery_key_confirm_title),
@@ -70,7 +71,7 @@ private fun Content(
     state: SecureBackupEnterRecoveryKeyState,
 ) {
     RecoveryKeyView(
-        modifier = Modifier.padding(top = 52.dp),
+        modifier = Modifier.padding(top = 52.dp, bottom = 32.dp),
         state = state.recoveryKeyViewState,
         onClick = null,
         onChange = {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/FlowStepPage.kt

@@ -52,6 +52,7 @@ fun FlowStepPage(
     iconStyle: BigIcon.Style,
     title: String,
     modifier: Modifier = Modifier,
+    isScrollable: Boolean = false,
     onBackClick: (() -> Unit)? = null,
     subTitle: String? = null,
     buttons: @Composable ColumnScope.() -> Unit = {},
@@ -62,6 +63,7 @@ fun FlowStepPage(
     }
     HeaderFooterPage(
         modifier = modifier,
+        isScrollable = isScrollable,
         topBar = {
             TopAppBar(
                 navigationIcon = {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt

@@ -22,7 +22,9 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -39,6 +41,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
  * @param modifier Classical modifier.
  * @param paddingValues padding values to apply to the content.
  * @param containerColor color of the container. Set to [Color.Transparent] if you provide a background in the [modifier].
+ * @param isScrollable if the whole content should be scrollable.
  * @param background optional background component.
  * @param topBar optional topBar.
  * @param header optional header.
@@ -50,6 +53,7 @@ fun HeaderFooterPage(
     modifier: Modifier = Modifier,
     paddingValues: PaddingValues = PaddingValues(20.dp),
     containerColor: Color = MaterialTheme.colorScheme.background,
+    isScrollable: Boolean = false,
     background: @Composable () -> Unit = {},
     topBar: @Composable () -> Unit = {},
     header: @Composable () -> Unit = {},
@@ -63,25 +67,53 @@ fun HeaderFooterPage(
     ) { padding ->
         Box {
             background()
-            Column(
+            if (isScrollable) {
-                modifier = Modifier
+                // Render in a LazyColumn
-                    .padding(paddingValues = paddingValues)
+                LazyColumn(
-                    .padding(padding)
+                    modifier = Modifier
-                    .consumeWindowInsets(padding)
+                        .padding(paddingValues = paddingValues)
-            ) {
+                        .padding(padding)
-                // Header
+                        .consumeWindowInsets(padding)
-                header()
+                        .imePadding()
-                // Content
+                ) {
+                    // Header
+                    item {
+                        header()
+                    }
+                    // Content
+                    item {
+                        content()
+                    }
+                    // Footer
+                    item {
+                        Box(modifier = Modifier.padding(horizontal = 16.dp)) {
+                            footer()
+                        }
+                    }
+                }
+            } else {
+                // Render in a Column
                 Column(
                     modifier = Modifier
-                        .weight(1f)
+                        .padding(paddingValues = paddingValues)
-                        .fillMaxWidth(),
+                        .padding(padding)
+                        .consumeWindowInsets(padding)
+                        .imePadding()
                 ) {
-                    content()
+                    // Header
-                }
+                    header()
-                // Footer
+                    // Content
-                Box(modifier = Modifier.padding(horizontal = 16.dp)) {
+                    Column(
-                    footer()
+                        modifier = Modifier
+                            .weight(1f)
+                            .fillMaxWidth(),
+                    ) {
+                        content()
+                    }
+                    // Footer
+                    Box(modifier = Modifier.padding(horizontal = 16.dp)) {
+                        footer()
+                    }
                 }
             }
         }