Make sure HeaderFooterPage can contents be scrolled (#4704)

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

Author: jmartinesp

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

@@ -7,11 +7,24 @@
 
 package io.element.android.features.securebackup.impl.enter
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.isImeVisible
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.relocation.BringIntoViewRequester
+import androidx.compose.foundation.relocation.bringIntoViewRequester
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -25,6 +38,9 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.ui.strings.CommonStrings
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import kotlin.time.Duration.Companion.milliseconds
 
 @Composable
 fun SecureBackupEnterRecoveryKeyView(
@@ -55,12 +71,30 @@ fun SecureBackupEnterRecoveryKeyView(
     }
 }
 
+@OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class)
 @Composable
 private fun Content(
     state: SecureBackupEnterRecoveryKeyState,
 ) {
+    val bringIntoViewRequester = remember { BringIntoViewRequester() }
+    var isFocused by remember { mutableStateOf(false) }
+    val isImeVisible = WindowInsets.isImeVisible
+    val coroutineScope = rememberCoroutineScope()
+    LaunchedEffect(isImeVisible, isFocused) {
+        // When the keyboard is shown, we want to scroll the text field into view
+        if (isImeVisible && isFocused) {
+            coroutineScope.launch {
+                // Delay to ensure the keyboard is fully shown
+                delay(100.milliseconds)
+                bringIntoViewRequester.bringIntoView()
+            }
+        }
+    }
     RecoveryKeyView(
-        modifier = Modifier.padding(top = 52.dp, bottom = 32.dp),
+        modifier = Modifier
+            .onFocusChanged { isFocused = it.isFocused }
+            .bringIntoViewRequester(bringIntoViewRequester)
+            .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

@@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
@@ -63,6 +65,7 @@ fun FlowStepPage(
                     }
                 },
                 title = {},
+                colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)
             )
         },
         header = {

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

@@ -9,12 +9,14 @@ package io.element.android.libraries.designsystem.atomic.pages
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.calculateEndPadding
 import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
@@ -94,25 +96,27 @@ fun HeaderFooterPage(
                         .run {
                             if (isScrollable) {
                                 verticalScroll(rememberScrollState())
+                                    // Make sure the scrollable content takes the full available height
+                                    .height(IntrinsicSize.Max)
                             } else {
                                 Modifier
                             }
                         }
                         // Apply insets here so if the content is scrollable it can get below the top app bar if needed
                         .padding(contentInsetsPadding)
-                        .weight(1f),
+                        .weight(1f, fill = true),
                 ) {
                     // Header
                     header()
-                    Box(modifier = Modifier.weight(1f)) {
+                    Box {
                         content()
                     }
                 }
 
                 // Footer
                 Box(
                     modifier = Modifier
-                        .padding(horizontal = 16.dp)
+                        .padding(start = 16.dp, end = 16.dp, top = 16.dp)
                         .fillMaxWidth()
                         .padding(footerInsetsPadding)
                 ) {