Text draws over each other instead of ellipsizing

[ShmuelCammebys]

In AndroidX ConstraintLayout, when a TextView is constrained e.g. to the start and end of the parent, and the parent shrinks, if the TextView is configured properly, it will ellipsize. A similar behavior is observed in a ChipGroup. However, this implementation of ConstraintLayout doesn't respect that, so composables are drawn over each other.

@Composable
fun ConversationListItem(
    conversation: Conversation,
    onMoreOptionsClicked: () -> Unit
) {

    ConstraintLayout(
        Modifier.clickable {

        }
    ) {
        val (avatarGroup, title, lastMessage, participants, iconButton, timestamp, divider) = createRefs()

        Box(Modifier.constrainAs(avatarGroup) {
            start.linkTo(parent.start, margin = 8.dp)
        }) {
            AvatarGroup(conversation.participants)
        }
        val titleConstraint = Modifier.constrainAs(title) {
            start.linkTo(avatarGroup.end, margin = 4.dp)
            top.linkTo(parent.top)
        }
        ChipGroup(modifier = titleConstraint) { //could implement as two separate constraints, but this is effectively a Row that wraps like a Text if its children can't fit on the same line given the remaining width
            if (conversation.isUnread)
                Text(
                    conversation.title,
                    fontSize = 14.sp,
                    lineHeight = 23.sp,
                    fontWeight = FontWeight.ExtraBold,
                    color = blueHighlight
                )
            else
                Text(
                    conversation.title,
                    fontSize = 14.sp,
                    lineHeight = 23.sp,
                )
            Row {
                if (conversation.isNotificationsMuted) Icon(
                    Icons.Default.NotificationsOff,
                    "Muted"
                )
                if (conversation.isFavorite) Icon(
                    Icons.Default.Star,
                    "Favorited"
                )
            }
        }

        Text(
            getTimeSince(conversation.dateUpdated),
            Modifier.constrainAs(timestamp) {
                end.linkTo(parent.end, margin = 8.dp)
                top.linkTo(parent.top)
            },
            fontWeight = FontWeight.ExtraLight
        )
        Text(
            conversation.lastMessage.message,
            Modifier.constrainAs(lastMessage) {
                top.linkTo(title.bottom)
                start.linkTo(avatarGroup.end)
//                end.linkTo(iconButton.start, margin = 36.dp) //won't ellipsize 36 dp before icon
            },
            fontSize = 14.sp,
            lineHeight = 23.sp,
            fontWeight = FontWeight.Light,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1
        )
        Text(
            conversation.participants.joinToString { it.name },
            Modifier.constrainAs(participants) {
                top.linkTo(lastMessage.bottom)
                start.linkTo(avatarGroup.end)
            },
            fontSize = 14.sp,
            lineHeight = 23.sp,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1
        )
        IconButton(
            onMoreOptionsClicked,
            Modifier.constrainAs(iconButton) {
                top.linkTo(timestamp.bottom)
                end.linkTo(parent.end)
            }
        ) {
            Icon(Icons.Default.MoreVert, "More options")
        }
        HorizontalDivider(Modifier.constrainAs(divider) {
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        })
    }

}

[skaldebane]

By AndroidX ConstraintLayout, I think you mean the View version (since you're mentioning TextViews)?
Did you try this out on the original Androidx version for Compose (not this library, the one by Google)?

If it exhibits the same behavior, then it's either intended behavior (i.e. it's just how Compose's layout works), or a bug that shall be fixed there and here.