I have a Row which contains three Text components. The behaviour I want is to shrink the second and third texts to the minimum width of 50 dp if the first text is too long.

The issue I’m having is that when I set requiredWidthIn(50.dp) for second and third texts inside that row and if the first text is long, it is pushing the second text until it disappears.

The other issue is that when it pushes the other texts, it’s disregarding the end and spacedBy paddings I’ve set. All the paddings are gone from the second and third texts.

Is there any way to fix this? thanks!

@Composable
fun MinWidthWithRowTestComp(modifier: Modifier = Modifier) {
    Row(
        modifier = Modifier
            .background(color = Color.Black)
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            modifier = Modifier
                .background(color = Color.Red),
            text = "Hello World! Hello World!  Hello World! Hello World! ",
        )

        Text(
            modifier = Modifier
                .background(color = Color.Blue)
                .requiredWidthIn(min = 50.dp),
            text = "Hello World!",
        )

        Text(
            modifier = Modifier
                .background(color = Color.Yellow)
                .requiredWidthIn(min = 50.dp),
            text = "Hello World!",
        )
    }
}