BWA-118 Tutorial text cut off in landscape mode (#312)

bitwarden · Jan 6, 2025 · 0ca97de · 0ca97de
1 parent 2acede9
commit 0ca97de
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/...rc/main/kotlin/com/bitwarden/authenticator/ui/platform/feature/tutorial/TutorialScreen.kt b/...rc/main/kotlin/com/bitwarden/authenticator/ui/platform/feature/tutorial/TutorialScreen.kt
@@ -15,11 +15,14 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -50,7 +53,7 @@ import com.bitwarden.authenticator.ui.platform.util.isPortrait
 /**
  * The custom horizontal margin that is specific to this screen.
  */
-private val LANDSCAPE_HORIZONTAL_MARGIN: Dp = 128.dp
+private val LANDSCAPE_HORIZONTAL_MARGIN: Dp = 48.dp
 
 /**
  * Top level composable for the tutorial screen.
@@ -98,6 +101,7 @@ fun TutorialScreen(
     }
 }
 
+@Suppress("LongMethod")
 @Composable
 private fun TutorialScreenContent(
     state: TutorialState,
@@ -114,21 +118,29 @@ private fun TutorialScreenContent(
 
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = modifier,
+        modifier = modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState()),
     ) {
         Spacer(modifier = Modifier.weight(1f))
 
-        HorizontalPager(state = pagerState) { index ->
+        HorizontalPager(
+            state = pagerState,
+            modifier = Modifier.fillMaxWidth(),
+        ) { index ->
             if (LocalConfiguration.current.isPortrait) {
                 TutorialScreenPortrait(
                     state = state.pages[index],
-                    modifier = Modifier.standardHorizontalMargin(),
+                    modifier = Modifier
+                        .standardHorizontalMargin()
+                        .statusBarsPadding(),
                 )
             } else {
                 TutorialScreenLandscape(
                     state = state.pages[index],
                     modifier = Modifier
-                        .standardHorizontalMargin(landscape = LANDSCAPE_HORIZONTAL_MARGIN),
+                        .standardHorizontalMargin(landscape = LANDSCAPE_HORIZONTAL_MARGIN)
+                        .statusBarsPadding(),
                 )
             }
         }
@@ -212,10 +224,11 @@ private fun TutorialScreenLandscape(
         Image(
             painter = rememberVectorPainter(id = state.image),
             contentDescription = null,
-            modifier = Modifier
-                .size(132.dp),
+            modifier = Modifier.size(132.dp),
         )
 
+        Spacer(modifier = Modifier.weight(1f))
+
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
             modifier = Modifier.padding(start = 40.dp),
@@ -233,6 +246,8 @@ private fun TutorialScreenLandscape(
                 style = MaterialTheme.typography.bodyLarge,
             )
         }
+
+        Spacer(modifier = Modifier.weight(1f))
     }
 }
 

diff --git a/.../java/com/bitwarden/authenticator/ui/authenticator/feature/tutorial/TutorialScreenTest.kt b/.../java/com/bitwarden/authenticator/ui/authenticator/feature/tutorial/TutorialScreenTest.kt
@@ -3,6 +3,7 @@ package com.bitwarden.authenticator.ui.authenticator.feature.tutorial
 import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.onNodeWithText
 import androidx.compose.ui.test.performClick
+import androidx.compose.ui.test.performScrollTo
 import com.bitwarden.authenticator.data.platform.repository.util.bufferedMutableSharedFlow
 import com.bitwarden.authenticator.ui.platform.base.BaseComposeTest
 import com.bitwarden.authenticator.ui.platform.feature.tutorial.TutorialAction
@@ -116,6 +117,7 @@ class TutorialScreenTest : BaseComposeTest() {
     fun `skip button click should send SkipClick action`() {
         composeTestRule
             .onNodeWithText("Skip")
+            .performScrollTo()
             .performClick()
         verify { viewModel.trySendAction(TutorialAction.SkipClick) }
     }