Fix text overflow and max lines on connect screen

2 files changed, 14 insertions, 0 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt
index 9774cc27fb..8a13c51612 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt
@@ -4,6 +4,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.model.ActionAfterDisconnect
@@ -58,6 +59,8 @@ private fun DisconnectedText(modifier: Modifier) {
         text = textResource(id = R.string.unsecured_connection),
         color = MaterialTheme.colorScheme.error,
         style = MaterialTheme.typography.connectionStatus,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
         modifier = modifier
     )
 }
@@ -73,6 +76,8 @@ private fun ConnectingText(isQuantumResistant: Boolean, modifier: Modifier) {
             ),
         color = MaterialTheme.colorScheme.onPrimary,
         style = MaterialTheme.typography.connectionStatus,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
         modifier = modifier
     )
 }
@@ -88,6 +93,8 @@ private fun ConnectedText(isQuantumResistant: Boolean, modifier: Modifier) {
             ),
         color = MaterialTheme.colorScheme.surface,
         style = MaterialTheme.typography.connectionStatus,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
         modifier = modifier
     )
 }
@@ -103,6 +110,8 @@ private fun ErrorText(isBlocking: Boolean, modifier: Modifier) {
             if (isBlocking) MaterialTheme.colorScheme.onPrimary
             else MaterialTheme.colorScheme.error,
         style = MaterialTheme.typography.connectionStatus,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
         modifier = modifier
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
index 94b5ef3b5b..03d6a0b01b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
@@ -41,6 +41,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -352,12 +353,16 @@ private fun ConnectionInfo(state: ConnectUiState) {
         text = state.location?.country ?: "",
         style = MaterialTheme.typography.headlineLarge,
         color = MaterialTheme.colorScheme.onPrimary,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
         modifier = Modifier.padding(horizontal = Dimens.sideMargin)
     )
     Text(
         text = state.location?.city ?: "",
         style = MaterialTheme.typography.headlineLarge,
         color = MaterialTheme.colorScheme.onPrimary,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
         modifier = Modifier.padding(horizontal = Dimens.sideMargin)
     )
     var expanded by rememberSaveable { mutableStateOf(false) }