Resolved Country item UI issue for multi lingual -2

.idea/deploymentTargetSelector.xml

@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-09-12T12:11:47.747326785Z">
+        <DropdownSelection timestamp="2024-09-13T12:02:16.437554256Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="LocalEmulator" identifier="path=/home/ubuntu/.android/avd/Television_1080p_API_31.avd" />
+              <DeviceId pluginId="PhysicalDevice" identifier="serial=1C051FDF60048Z" />
             </handle>
           </Target>
         </DropdownSelection>

app/src/main/java/com/vpn/fastestvpnservice/customItems/CountryItem.kt

@@ -43,6 +43,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
@@ -127,13 +128,13 @@ fun CountryItem(
 
         Column {
             /* Country Location's Row */
-            Row(
-                verticalAlignment = Alignment.Top,
-                horizontalArrangement = Arrangement.Start,
+            Box(
+//                verticalAlignment = Alignment.Top,
+//                horizontalArrangement = Arrangement.Start,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(
-                        start = 12.dp, end = 12.dp, top = 12.dp
+                        start = 12.dp, end = 7.dp, top = 12.dp
                     )
                     .background(Color.Transparent)
                     .clickable(
@@ -168,7 +169,7 @@ fun CountryItem(
                         contentDescription = "Server Logo",
                         tint = Color.Unspecified,
                         modifier = Modifier
-                            .padding(bottom = 16.dp)
+                            .padding(bottom = 15.dp)
                             .size(24.dp)
                             .clip(CircleShape)
                             .border(1.dp, colorResource(id = R.color.gray_opac_04), CircleShape)
@@ -176,32 +177,41 @@ fun CountryItem(
                                 painter = painterResource(id = icon),
                                 contentScale = ContentScale.FillBounds
                             )
+                            .align(Alignment.CenterStart)
                     )
-
-                    Text(
-                        text = server.country!!,
-                        style = MaterialTheme.typography.labelMedium,
-                        color = MaterialTheme.colorScheme.primary,
+                    Surface(
                         modifier = Modifier
-                            .padding(start = 16.dp, bottom = 18.dp)
-                            .align(Alignment.CenterVertically)
-                    )
-                    Spacer(modifier = Modifier.weight(1F))
+                            .padding(start = 40.dp, bottom = 15.dp, end = 110.dp)
+                            .align(Alignment.CenterStart)
+                            .background(Color.Transparent),
+                        color = Color.Transparent
+                    ) {
+                        Text(
+                            text = server.country!!,
+                            style = MaterialTheme.typography.labelMedium,
+                            color = MaterialTheme.colorScheme.primary,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            modifier = Modifier
+                                .align(Alignment.CenterStart)
+                        )
+                    }
+//                    Spacer(modifier = Modifier.weight(1F))
                     Text(
                         text = "$countryTotalServers ${context.getString(R.string.locations)}",
                         style = MaterialTheme.typography.bodySmall,
                         color = MaterialTheme.colorScheme.primary,
                         modifier = Modifier
-                            .padding(end = 30.dp, bottom = 18.dp)
-                            .align(Alignment.CenterVertically)
+                            .padding(end = 50.dp, bottom = 15.dp)
+                            .align(Alignment.CenterEnd)
                             .alpha(0.4F)
                     )
 //            Spacer(modifier = Modifier.weight(1F))
                     Icon(
                         modifier = Modifier
-                            .padding(bottom = 18.dp, end = 0.dp)
+                            .padding(bottom = 15.dp, end = 4.dp)
                             .size(12.dp, 7.dp)
-                            .align(Alignment.CenterVertically)
+                            .align(Alignment.CenterEnd)
                             .clickable(
                                 indication = null,
                                 interactionSource = remember { MutableInteractionSource() }