android/ui: fix accessibility font size issues (#307)

updates tailscale/corp#19057

Adds scrollability to some of the previously fixed views so they render properly with larger font sizes or smaller screens.

Signed-off-by: Jonathan Nobels <jonathan@tailscale.com>

android/src/main/java/com/tailscale/ipn/ui/view/AboutView.kt

@@ -12,7 +12,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -37,7 +39,7 @@ fun AboutView(backToSettings: BackNavigation) {
         verticalArrangement =
             Arrangement.spacedBy(space = 20.dp, alignment = Alignment.CenterVertically),
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = Modifier.fillMaxWidth().fillMaxHeight().padding(innerPadding)) {
+        modifier = Modifier.fillMaxWidth().fillMaxHeight().padding(innerPadding).verticalScroll(rememberScrollState())) {
           Image(
               modifier =
                   Modifier.width(100.dp)

android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt

@@ -7,7 +7,9 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.ClickableText
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -35,7 +37,7 @@ fun BugReportView(backToSettings: BackNavigation, model: BugReportViewModel = vi
 
   Scaffold(topBar = { Header(R.string.bug_report_title, onBack = backToSettings) }) { innerPadding
     ->
-    Column(modifier = Modifier.padding(innerPadding).fillMaxWidth().fillMaxHeight()) {
+    Column(modifier = Modifier.padding(innerPadding).fillMaxWidth().fillMaxHeight().verticalScroll(rememberScrollState())) {
       ListItem(
           headlineContent = {
             ClickableText(

android/src/main/java/com/tailscale/ipn/ui/view/IntroView.kt

@@ -13,6 +13,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -28,7 +30,7 @@ import com.tailscale.ipn.R
 @Composable
 fun IntroView(onContinue: () -> Unit) {
   Column(
-      modifier = Modifier.fillMaxHeight().fillMaxWidth(),
+      modifier = Modifier.fillMaxHeight().fillMaxWidth().verticalScroll(rememberScrollState()),
       horizontalAlignment = Alignment.CenterHorizontally,
       verticalArrangement = Arrangement.Center) {
         Image(
@@ -48,15 +50,15 @@ fun IntroView(onContinue: () -> Unit) {
               fontSize = MaterialTheme.typography.titleMedium.fontSize)
         }
         Spacer(modifier = Modifier.height(40.dp))
-      }
 
-  Box(
+        Box(
-      modifier = Modifier.fillMaxHeight().padding(start = 20.dp, end = 20.dp, bottom = 40.dp),
+            modifier = Modifier.fillMaxHeight().padding(start = 20.dp, end = 20.dp, bottom = 40.dp),
-      contentAlignment = Alignment.BottomCenter) {
+            contentAlignment = Alignment.BottomCenter) {
-        Text(
+              Text(
-            text = stringResource(R.string.welcome2),
+                  text = stringResource(R.string.welcome2),
-            style = MaterialTheme.typography.bodyMedium,
+                  style = MaterialTheme.typography.bodyMedium,
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                  color = MaterialTheme.colorScheme.onSurfaceVariant,
-            textAlign = TextAlign.Center)
+                  textAlign = TextAlign.Center)
+            }
       }
 }

android/src/main/java/com/tailscale/ipn/ui/view/ManagedByView.kt

@@ -7,6 +7,8 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.safeContentPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,7 +29,7 @@ fun ManagedByView(backToSettings: BackNavigation, model: IpnViewModel = viewMode
         verticalArrangement =
             Arrangement.spacedBy(space = 20.dp, alignment = Alignment.CenterVertically),
         horizontalAlignment = Alignment.Start,
-        modifier = Modifier.fillMaxWidth().safeContentPadding()) {
+        modifier = Modifier.fillMaxWidth().safeContentPadding().verticalScroll(rememberScrollState())) {
           val managedByOrganization =
               MDMSettings.managedByOrganizationName.flow.collectAsState().value
           val managedByCaption = MDMSettings.managedByCaption.flow.collectAsState().value

android/src/main/java/com/tailscale/ipn/ui/view/RunExitNodeView.kt

@@ -10,6 +10,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.ArrowForward
 import androidx.compose.material3.Button
@@ -47,7 +49,7 @@ fun RunExitNodeView(
               horizontalAlignment = Alignment.CenterHorizontally,
               verticalArrangement =
                   Arrangement.spacedBy(24.dp, alignment = Alignment.CenterVertically),
-              modifier = Modifier.padding(innerPadding).padding(24.dp).fillMaxHeight()) {
+              modifier = Modifier.padding(innerPadding).padding(24.dp).fillMaxHeight().verticalScroll(rememberScrollState())) {
                 RunExitNodeGraphic()
 
                 if (isRunningExitNode) {