make initial screen in compose example scrollable

@@ -11,6 +11,8 @@ import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.activity.viewModels
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
 import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Alignment
@@ -84,52 +86,60 @@ class MainActivity : ComponentActivity() {
         AppTheme {
         AppTheme {
             var url by remember { mutableStateOf(defaultUrl) }
             var url by remember { mutableStateOf(defaultUrl) }
             var token by remember { mutableStateOf(defaultToken) }
             var token by remember { mutableStateOf(defaultToken) }
+            val scrollState = rememberScrollState()
             // A surface container using the 'background' color from the theme
             // A surface container using the 'background' color from the theme
             Surface(
             Surface(
                 color = MaterialTheme.colors.background,
                 color = MaterialTheme.colors.background,
-                modifier = Modifier.fillMaxSize()
+                modifier = Modifier
+                    .fillMaxSize()
             ) {
             ) {
-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    modifier = Modifier.padding(10.dp)
+                Box(
+                    modifier = Modifier
+                        .verticalScroll(scrollState)
                 ) {
                 ) {
-                    Spacer(modifier = Modifier.height(50.dp))
-                    Image(
-                        painter = painterResource(id = R.drawable.banner_dark),
-                        contentDescription = "",
-                    )
-                    Spacer(modifier = Modifier.height(20.dp))
-                    OutlinedTextField(
-                        value = url,
-                        onValueChange = { url = it },
-                        label = { Text("URL") },
-                        modifier = Modifier.fillMaxWidth(),
-                    )
-                    Spacer(modifier = Modifier.height(20.dp))
-                    OutlinedTextField(
-                        value = token,
-                        onValueChange = { token = it },
-                        label = { Text("Token") },
-                        modifier = Modifier.fillMaxWidth(),
-                    )
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        modifier = Modifier
+                            .padding(10.dp)
+                    ) {
+                        Spacer(modifier = Modifier.height(50.dp))
+                        Image(
+                            painter = painterResource(id = R.drawable.banner_dark),
+                            contentDescription = "",
+                        )
+                        Spacer(modifier = Modifier.height(20.dp))
+                        OutlinedTextField(
+                            value = url,
+                            onValueChange = { url = it },
+                            label = { Text("URL") },
+                            modifier = Modifier.fillMaxWidth(),
+                        )
+                        Spacer(modifier = Modifier.height(20.dp))
+                        OutlinedTextField(
+                            value = token,
+                            onValueChange = { token = it },
+                            label = { Text("Token") },
+                            modifier = Modifier.fillMaxWidth(),
+                        )
 
 
-                    Spacer(modifier = Modifier.height(20.dp))
-                    Button(onClick = { onConnect(url, token) }) {
-                        Text("Connect")
-                    }
+                        Spacer(modifier = Modifier.height(20.dp))
+                        Button(onClick = { onConnect(url, token) }) {
+                            Text("Connect")
+                        }
 
 
-                    Spacer(modifier = Modifier.height(20.dp))
-                    Button(onClick = { onSave(url, token) }) {
-                        Text("Save Values")
-                    }
+                        Spacer(modifier = Modifier.height(20.dp))
+                        Button(onClick = { onSave(url, token) }) {
+                            Text("Save Values")
+                        }
 
 
-                    Spacer(modifier = Modifier.height(20.dp))
-                    Button(onClick = {
-                        onReset()
-                        url = MainViewModel.URL
-                        token = MainViewModel.TOKEN
-                    }) {
-                        Text("Reset Values")
+                        Spacer(modifier = Modifier.height(20.dp))
+                        Button(onClick = {
+                            onReset()
+                            url = MainViewModel.URL
+                            token = MainViewModel.TOKEN
+                        }) {
+                            Text("Reset Values")
+                        }
                     }
                     }
                 }
                 }
             }
             }