Login Page :

    [![@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LoginPage(navController: NavController) {
    val context = LocalContext.current
    val homeScreen = remember { mutableStateOf(false) }
    val loginScreen = remember { mutableStateOf(false) }
    val mobileNumberState = remember { mutableStateOf("") }
    val showToastState = remember { mutableStateOf(false) }
    var buttonClicked by remember { mutableStateOf(false) }
    val keyboardController = LocalSoftwareKeyboardController.current

    // Check the length of the mobile number
    val isMobileNumberValid = mobileNumberState.value.length == 10 && mobileNumberState.value.isDigitsOnly()
    var isFieldFocused by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }

    Surface(
        color = Color(
            ContextCompat.getColor(
                context,
                R.color.pageBg
            )
        ),
        modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 16.dp)
                .background(Color.White)
                .verticalScroll(rememberScrollState())
        ) {
            Spacer(modifier = Modifier.weight(1f))
            Text(
                text = "Welcome Back!",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.headlineMedium,
                fontFamily = regular,
                color = colorResource(id = R.color.scaapp),
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "Let’s get Started",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.headlineSmall,
                color = colorResource(id = R.color.splashtext),
                fontFamily = regular
            )
            Spacer(modifier = Modifier.height(24.dp))
            Image(
                painter = painterResource(id = R.drawable.login), // Replace 'login' with your drawable file name
                contentDescription = "Splash Image",
                modifier = Modifier
                    .fillMaxWidth()
                    .aspectRatio(1f)
                    .align(Alignment.CenterHorizontally)
            )
            Spacer(modifier = Modifier.height(24.dp))
            OutlinedTextField(
                value = mobileNumberState.value,
                keyboardOptions = KeyboardOptions(
                    capitalization = KeyboardCapitalization.None,
                    autoCorrect = true,
                    keyboardType = KeyboardType.Number,
                    imeAction = ImeAction.Done
                ),
                label = {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Text("+91 ", fontFamily = semibold)
                        Text(
                            text = "Enter Your Mobile Number",
//                            style = MaterialTheme.typography.bodySmall,
                            color = Color(
                                ContextCompat.getColor(
                                    context,
                                    R.color.placeholderColor
                                )
                            ),
                            maxLines = 1,
                        )
                    }
                },
                onValueChange = {
                    if (it.length <= 10) {
                        mobileNumberState.value = it.filter { char -> char.isDigit() } // This also ensures the input is only digits
                    }
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .focusRequester(focusRequester)
                    .onFocusChanged { focusState ->
                        isFieldFocused = focusState.isFocused
                    },
                colors = TextFieldDefaults.outlinedTextFieldColors(
                    focusedBorderColor = if (isFieldFocused) {
                        if (mobileNumberState.value.length == 10) colorResource(id = R.color.scaapp) else Color.Red
                    } else colorResource(id = R.color.fieldBorder),
                    unfocusedBorderColor = colorResource(id = R.color.fieldBorder)
                )
            )
            Spacer(modifier = Modifier.height(16.dp))
            Button(
                onClick = {
                    val mobileNumber = mobileNumberState.value
                    if (mobileNumber.length == 10 && mobileNumber.isDigitsOnly()) {
                        showToastState.value = false
                        buttonClicked = true
                    } else {
                        showToastState.value = true
                        keyboardController?.hide()
                    }
                },
                shape = RoundedCornerShape(5.dp),
                modifier = Modifier
                    .height(50.dp)
                    .fillMaxWidth(),
               colors = ButtonDefaults.buttonColors(
                    containerColor = if (isMobileNumberValid) colorResource(R.color.scaapp) else colorResource(R.color.buttonDisable), // Set the background color
                    contentColor = Color.White // Set the text color
                )
            ) {
                Text("Sign in")
            }
            Spacer(modifier = Modifier.height(16.dp))
            Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
                Text(
                    "Don't have an account?",
                    color = colorResource(id = R.color.black),
                    fontFamily = regular
                )
                Text(
                    " Register here",
                    modifier = Modifier.clickable { navController.navigate(ROUTES.SIGNUP.name) },
                    color = colorResource(id = R.color.scaapp),
                    fontFamily = regular
                )
            }
        }
    }

    val prefDataStore = PreferenceDataStore(LocalContext.current)
    val accesstoken = runBlocking { prefDataStore.userName.first() }

    if (accesstoken.isEmpty()) {
        loginScreen.value = true
    } else {
        LaunchedEffect(true) {
            withContext(Dispatchers.IO) {
                prefDataStore.getDetails().collect {
                    if (it.name != "") {
                        withContext(Dispatchers.Main) {
                            homeScreen.value = true
                            navController.navigate(ROUTES.HOME.name)
                        }
                    } else {
                        withContext(Dispatchers.Main) {
                            navController.navigate(ROUTES.LOGIN.name)
                        }
                    }
                }
            }
        }
    }
}

@Preview(showBackground = true, device = Devices.DEFAULT)
@Composable
fun LoginPagePreview() {
    SCATheme {
        val navController = rememberNavController()
        LoginPage(navController)
    }
}

when I check my UI in Start Check UI mode , 115%, 130 %, 180 % and 200 % screen sizes are always weird

As you can see “Don’t have an account?” and ” Register here” are not in single line except 100 % phone screen size

I also checked in real devices too…issue still exists

I need to show full text in single line without …

“Enter Your Mobile Number” is also issue in many screens as you can see in image

How to adaptable for all screen sizes in android jetpack compose