Fix device list split view scrolling

2 files changed, 90 insertions, 85 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
index 887237374b..9e17d5cf63 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -90,12 +89,6 @@ fun <T> ItemList(
 ) {
     Column(
         modifier = modifier
-            .then(
-                Modifier
-                    .verticalScroll(
-                        rememberScrollState()
-                    )
-            )
     ) {
         items.forEach { item ->
             DeviceRow(itemText.invoke(item), itemPainter) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
index b9dcae7e8e..7794a25603 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
@@ -11,12 +11,12 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
@@ -55,95 +55,106 @@ fun DeviceListScreen(
             .fillMaxWidth()
             .background(colorResource(id = R.color.darkBlue))
     ) {
-        val (icon, message, list, actionButtons) = createRefs()
-
-        Image(
-            painter = painterResource(
-                id = if (state.hasTooManyDevices) {
-                    R.drawable.icon_fail
-                } else {
-                    R.drawable.icon_success
-                }
-            ),
-            contentDescription = null, // No meaningful user info or action.
-            modifier = Modifier
-                .constrainAs(icon) {
-                    top.linkTo(parent.top, margin = 30.dp)
-                    start.linkTo(parent.start)
-                    end.linkTo(parent.end)
-                }
-                .width(64.dp)
-                .height(64.dp)
-        )
+        val (content, buttons) = createRefs()
 
         Column(
             modifier = Modifier
-                .constrainAs(message) {
-                    top.linkTo(icon.bottom, margin = 16.dp)
-                    start.linkTo(parent.start, margin = 22.dp)
-                    end.linkTo(parent.end, margin = 22.dp)
-                    width = Dimension.fillToConstraints
-                },
-        ) {
-            Text(
-                text = stringResource(
-                    id = if (state.hasTooManyDevices) {
-                        R.string.max_devices_warning_title
-                    } else {
-                        R.string.max_devices_resolved_title
-                    }
-                ),
-                fontSize = 24.sp,
-                color = Color.White,
-                fontWeight = FontWeight.Bold
-            )
-            Text(
-                text = stringResource(
-                    id = if (state.hasTooManyDevices) {
-                        R.string.max_devices_warning_description
-                    } else {
-                        R.string.max_devices_resolved_description
-                    }
-                ),
-                color = Color.White,
-                fontSize = 14.sp,
-                modifier = Modifier
-                    .wrapContentHeight()
-                    .animateContentSize()
-                    .padding(top = 8.dp)
-            )
-        }
-
-        Box(
-            modifier = Modifier
-                .constrainAs(list) {
-                    top.linkTo(message.bottom, margin = 20.dp)
-                    bottom.linkTo(actionButtons.top, margin = 5.dp)
+                .constrainAs(content) {
+                    top.linkTo(parent.top)
+                    bottom.linkTo(buttons.top)
                     height = Dimension.fillToConstraints
                     width = Dimension.matchParent
                 }
+                .verticalScroll(rememberScrollState())
         ) {
-            if (state.isLoading) {
-                CircularProgressIndicator(
-                    color = Color.White,
-                    strokeWidth = 8.dp,
-                    modifier = Modifier.align(Alignment.Center)
-                )
-            } else {
-                ItemList(
-                    state.devices,
-                    itemText = { it.name.capitalizeFirstCharOfEachWord() },
-                    onItemClicked = {
-                        viewModel.stageDeviceForRemoval(it)
-                    },
-                    itemPainter = painterResource(id = R.drawable.icon_close)
+            ConstraintLayout(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+            ) {
+                val (icon, message, list) = createRefs()
+
+                Image(
+                    painter = painterResource(
+                        id = if (state.hasTooManyDevices) {
+                            R.drawable.icon_fail
+                        } else {
+                            R.drawable.icon_success
+                        }
+                    ),
+                    contentDescription = null, // No meaningful user info or action.
+                    modifier = Modifier
+                        .constrainAs(icon) {
+                            top.linkTo(parent.top, margin = 30.dp)
+                            start.linkTo(parent.start)
+                            end.linkTo(parent.end)
+                        }
+                        .width(64.dp)
+                        .height(64.dp)
                 )
+
+                Column(
+                    modifier = Modifier
+                        .constrainAs(message) {
+                            top.linkTo(icon.bottom, margin = 16.dp)
+                            start.linkTo(parent.start, margin = 22.dp)
+                            end.linkTo(parent.end, margin = 22.dp)
+                            width = Dimension.fillToConstraints
+                        },
+                ) {
+                    Text(
+                        text = stringResource(
+                            id = if (state.hasTooManyDevices) {
+                                R.string.max_devices_warning_title
+                            } else {
+                                R.string.max_devices_resolved_title
+                            }
+                        ),
+                        fontSize = 24.sp,
+                        color = Color.White,
+                        fontWeight = FontWeight.Bold
+                    )
+
+                    Text(
+                        text = stringResource(
+                            id = if (state.hasTooManyDevices) {
+                                R.string.max_devices_warning_description
+                            } else {
+                                R.string.max_devices_resolved_description
+                            }
+                        ),
+                        color = Color.White,
+                        fontSize = 14.sp,
+                        modifier = Modifier
+                            .wrapContentHeight()
+                            .animateContentSize()
+                            .padding(top = 8.dp)
+                    )
+                }
+
+                Box(
+                    modifier = Modifier
+                        .constrainAs(list) {
+                            top.linkTo(message.bottom, margin = 20.dp)
+                            height = Dimension.wrapContent
+                            width = Dimension.matchParent
+                        }
+                ) {
+                    ItemList(
+                        state.devices,
+                        itemText = { it.name.capitalizeFirstCharOfEachWord() },
+                        onItemClicked = {
+                            viewModel.stageDeviceForRemoval(it)
+                        },
+                        itemPainter = painterResource(id = R.drawable.icon_close)
+                    )
+                }
             }
         }
 
         Column(
             modifier = Modifier
-                .constrainAs(actionButtons) {
+                .constrainAs(buttons) {
                     bottom.linkTo(parent.bottom, margin = 22.dp)
                     start.linkTo(parent.start, margin = 22.dp)
                     end.linkTo(parent.end, margin = 22.dp)
@@ -161,6 +172,7 @@ fun DeviceListScreen(
                     contentColor = Color.White
                 )
             )
+
             ActionButton(
                 text = stringResource(id = R.string.back),
                 onClick = onBackClick,