Repository: bumble-tech/appyx
Issue: Fix sandbox on small screen devices

On small screen devices (you can reproduce by using split screen if required) several of the lists within the sandbox do not scroll.

This causes the content to become truncated. We should add the vertical scrolling modifier to fix these Nodes.

Changed files:
sandbox/src/main/java/com/bumble/appyx/sandbox/client/mvicoreexample/MviCoreExampleView.kt
sandbox/src/main/java/com/bumble/appyx/sandbox/client/container/ContainerNode.kt

diff --git a/sandbox/src/main/java/com/bumble/appyx/sandbox/client/container/ContainerNode.kt b/sandbox/src/main/java/com/bumble/appyx/sandbox/client/container/ContainerNode.kt
index 1287d235..910706c8 100644
--- a/sandbox/src/main/java/com/bumble/appyx/sandbox/client/container/ContainerNode.kt
+++ b/sandbox/src/main/java/com/bumble/appyx/sandbox/client/container/ContainerNode.kt
@@ -8,6 +8,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -164,8 +166,10 @@ class ContainerNode(
 
     @Composable
     fun ExamplesList(modifier: Modifier) {
+        val scrollState = rememberScrollState()
         Box(
             modifier = modifier
+                .verticalScroll(scrollState)
                 .fillMaxSize()
                 .padding(24.dp),
             contentAlignment = Alignment.Center
@@ -203,8 +207,10 @@ class ContainerNode(
 
     @Composable
     fun RoutingSources(modifier: Modifier) {
+        val scrollState = rememberScrollState()
         Box(
             modifier = modifier
+                .verticalScroll(scrollState)
                 .fillMaxSize()
                 .padding(24.dp),
             contentAlignment = Alignment.Center
diff --git a/sandbox/src/main/java/com/bumble/appyx/sandbox/client/mvicoreexample/MviCoreExampleView.kt b/sandbox/src/main/java/com/bumble/appyx/sandbox/client/mvicoreexample/MviCoreExampleView.kt
index 35851aef..f96992f3 100644
--- a/sandbox/src/main/java/com/bumble/appyx/sandbox/client/mvicoreexample/MviCoreExampleView.kt
+++ b/sandbox/src/main/java/com/bumble/appyx/sandbox/client/mvicoreexample/MviCoreExampleView.kt
@@ -8,6 +8,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Text
@@ -63,8 +65,11 @@ class MviCoreExampleViewImpl(
     @Composable
     override fun ParentNode<Routing>.NodeView(modifier: Modifier) {
         val viewModel = vm ?: return
+        val scrollState = rememberScrollState()
         Column(
-            modifier = modifier.fillMaxSize(),
+            modifier = modifier
+                .verticalScroll(scrollState)
+                .fillMaxSize(),
             verticalArrangement = Arrangement.Center
         ) {
             Text(