How to stop Text overlapping the Icon when Text is longer in a Row

Hi apologies the title is not so clear.

I have a Row with a Text and Icon. Row has verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween

If the text in the row is longer the Icon is not visible.

how can I resolve this please

    Row(
        modifier = modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(
            text = title,
            style = MaterialTheme.typography.bodyMedium,
            color = Color.White
    )
    Icon(
            modifier = Modifier
                    .size(24.dp),
            contentDescription = null,
            imageVector = icon,
            tint = MaterialTheme.colorScheme.primary,

    )
}

This is a preview if text is small and text is longer where the arrow is not visible.

How can I ensure Icon is visible when the text is long please

Thanks
R

>Solution :

You can try to use the weight Modifier:

Text(
    modifier = Modifier.weight(1f),
    text = title,
    style = MaterialTheme.typography.bodyMedium,
    color = Color.White
)

You then can remove the horizontalArrangement Modifier from your Row.

Composables with the weight Modifier will be measured after all sibling Composables without that Modifier. The remaining space is then distributed between the Composables with the weight Modifier. If only one Composable has the weight Modifier, all remaining space will be filled by that Composable.