refactor: `RegularPreference` using adaptive layout

app/src/main/java/com/geeksville/mesh/ui/components/RegularPreference.kt

@@ -3,6 +3,8 @@ package com.geeksville.mesh.ui.components
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -42,6 +44,7 @@ fun RegularPreference(
     )
 }
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun RegularPreference(
     title: String,
@@ -52,6 +55,12 @@ fun RegularPreference(
     summary: String? = null,
     trailingIcon: ImageVector? = null,
 ) {
+    val color = if (enabled) {
+        MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
+    } else {
+        MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
+    }
+
     Column(
         modifier = modifier
             .fillMaxWidth()
@@ -61,10 +70,13 @@ fun RegularPreference(
         Row(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            FlowRow(
+                modifier = Modifier.weight(1f),
+                horizontalArrangement = Arrangement.SpaceBetween,
             ) {
                 Text(
                     text = title,
-                modifier = Modifier.weight(1f),
                     style = MaterialTheme.typography.body1,
                     color = if (enabled) {
                         Color.Unspecified
@@ -76,34 +88,26 @@ fun RegularPreference(
                 Text(
                     text = subtitle,
                     style = MaterialTheme.typography.body1,
-                color = if (enabled) {
-                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
-                } else {
-                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
-                },
+                    color = color,
                 )
-            if (trailingIcon != null) Icon(
-                trailingIcon, "trailingIcon",
-                modifier = modifier
+            }
+            if (trailingIcon != null) {
+                Icon(
+                    imageVector = trailingIcon,
+                    contentDescription = "trailingIcon",
+                    modifier = Modifier
                         .padding(start = 8.dp)
                         .wrapContentWidth(Alignment.End),
-                tint = if (enabled) {
-                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
-                } else {
-                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
-                },
+                    tint = color,
                 )
             }
+        }
         if (summary != null) {
             Divider(modifier = Modifier.padding(vertical = 8.dp))
             Text(
                 text = summary,
                 style = MaterialTheme.typography.body2,
-                color = if (enabled) {
-                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
-                } else {
-                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
-                },
+                color = color,
             )
         }
     }