Bottom view text is half cut in jetpack compose

Question

I have a Column something like this

@Composable
fun ScreenView(verticalScroll: ScrollState = rememberScrollState()){
    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .verticalScroll(verticalScroll),
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(painter = abc, contentDescription =null )
            Text(text = "xyz")
        }
        Column {
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .background(Color.Gray)
                    .padding(vertical = 10.dp, horizontal = 20.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Image(painter = abc, contentDescription = null)
                Text(
                    text = "warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage",
                    style = SlateTypography.body2
                )
            }
        }
    }
}

My bottom view Row looks like this in bigger device

But when I tried for smaller device my Row view looks like this

For smaller device you change through adb

Density

adb shell wm density 540

Size

adb shell wm size 1080x2280

So how can I fix this problem?

Answer 1

Try assigning false to softWrap attribute of your Text composable:

Text(
   softWrap = false
)

Answer 2

use Modifier.weight modifier on the Text composable to allow it to take up the remaining space in the Row after the Image has been laid out. This will also make the Text wrap its content to the next line if it doesn't fit in the available space.

Row(
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .background(Color.Gray)
        .padding(vertical = 10.dp, horizontal = 20.dp),
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
    Image(painter = abc, contentDescription = null)
    Text(
        text = "warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage",
        style = SlateTypography.body2,
        modifier = Modifier.weight(1f) // This modifier allows the Text to take up the remaining space in the Row
    )
}