android: expanded width - two-column Connect, 640dp settings

src/frontends/android/app/src/main/java/org/strongswan/android/ui/compose/HomeScreen.kt

@@ -113,6 +113,9 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import kotlinx.coroutines.flow.StateFlow
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.foundation.layout.fillMaxHeight
 import org.strongswan.android.R
 import org.strongswan.android.data.VpnProfile
 import org.strongswan.android.logic.VpnStateService.ErrorState
@@ -221,15 +224,8 @@ fun HomeScreen(
 	Box(Modifier.fillMaxSize())
 	{
 		StatusGlowBackground(color = statusColor, active = connected || connecting)
-		LazyColumn(
+		val wide = LocalConfiguration.current.screenWidthDp >= 840
-			state = listState,
+		val leftItems: LazyListScope.() -> Unit = {
-			/* the adaptive navigation scaffold no longer pads the content area,
-			 * so the hero offsets itself below the status bar */
-			modifier = Modifier.fillMaxSize().statusBarsPadding(),
-			horizontalAlignment = Alignment.CenterHorizontally,
-			verticalArrangement = Arrangement.spacedBy(ShxSpacing.lg),
-		)
-		{
 			item(key = "hero") {
 				Column(
 					modifier = Modifier
@@ -304,6 +300,8 @@ fun HomeScreen(
 					TrafficTiles(traffic = traffic, onClick = { viewModel.openDetails(true) })
 				}
 			}
+		}
+		val rightItems: LazyListScope.() -> Unit = {
 			item(key = "banner") {
 				HomeBannerSlot(
 					error = hasError,
@@ -329,6 +327,39 @@ fun HomeScreen(
 			}
 			item(key = "space") { Spacer(Modifier.height(ShxSpacing.xl)) }
 		}
+		if (wide)
+		{
+			/* expanded width: hero and profile on the left, status blocks on the right */
+			Row(Modifier.fillMaxSize().statusBarsPadding())
+			{
+				LazyColumn(
+					state = listState,
+					modifier = Modifier.weight(1f).fillMaxHeight(),
+					horizontalAlignment = Alignment.CenterHorizontally,
+					verticalArrangement = Arrangement.spacedBy(ShxSpacing.lg),
+				) { leftItems() }
+				LazyColumn(
+					modifier = Modifier.weight(1f).fillMaxHeight().padding(top = ShxSpacing.xl),
+					horizontalAlignment = Alignment.CenterHorizontally,
+					verticalArrangement = Arrangement.spacedBy(ShxSpacing.lg),
+				) { rightItems() }
+			}
+		}
+		else
+		{
+			LazyColumn(
+				state = listState,
+				/* the adaptive navigation scaffold no longer pads the content area,
+				 * so the hero offsets itself below the status bar */
+				modifier = Modifier.fillMaxSize().statusBarsPadding(),
+				horizontalAlignment = Alignment.CenterHorizontally,
+				verticalArrangement = Arrangement.spacedBy(ShxSpacing.lg),
+			)
+			{
+				leftItems()
+				rightItems()
+			}
+		}
 	}
 
 	if (pickerOpen)

src/frontends/android/app/src/main/java/org/strongswan/android/ui/compose/SettingsScreen.kt

@@ -95,6 +95,7 @@ import org.strongswan.android.ui.compose.theme.ThemeMode
 import androidx.compose.material3.Icon
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.widthIn
 import org.strongswan.android.R
 import org.strongswan.android.data.VpnProfile
 import org.strongswan.android.logic.StrongSwanApplication
@@ -181,9 +182,10 @@ fun SettingsScreen(profiles: List<VpnProfile>, showTitle: Boolean = true)
 	val effects = MaterialTheme.motionScheme.defaultEffectsSpec<Float>()
 	val spatial = MaterialTheme.motionScheme.defaultSpatialSpec<androidx.compose.ui.unit.IntOffset>()
 
-	Box(Modifier.fillMaxSize())
+	Box(Modifier.fillMaxSize(), contentAlignment = Alignment.TopCenter)
 	{
 	AnimatedContent(
+		modifier = Modifier.widthIn(max = 640.dp),
 		targetState = pageState,
 		transitionSpec = {
 			val forward = targetState != SettingsPage.ROOT