LazyVerticalGrid and Text button

I want to show a list of text buttons which are coming from the backend and does not have the same length of text.

But the LazyVerticalGrid does not seem to take the length of the text considariton so it usually cuts off the end of the word.

        Column(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            LazyVerticalGrid(
                columns = GridCells.Fixed(4)
            ) {
                items(
                    lodgingPropertyList,
                    key = { it.id }
                ) {
                    CustomeChipElement(
                        text = it.name,
                        isSelected = false,
                        onClick = {},
                    )
                }
            }
        }

And the composable:

@Composable
fun CustomeChipElement(
    isSelected: Boolean,
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    TextButton(
        shape = RoundedCornerShape(15.dp),
        border = if (!isSelected) BorderStroke(
            width = 1.dp,
            color = Color.LightGray
        ) else null,
        contentPadding = PaddingValues(
            horizontal = 10.dp,
            vertical = 12.dp
        ),
        colors = ButtonDefaults.textButtonColors().copy(
            containerColor = SlightPink.takeIf { isSelected } ?: Color.White,
            contentColor = Color.White.takeIf { isSelected } ?: Color.Black,
        ),
        modifier = modifier,
        onClick = {

        }
    ) {
        Text(
            text = text,
            maxLines = 1,
            modifier = Modifier

        )
    }
}

The first chip element says "There are more text here" but only the "There are" is visible.

I tried using like GridCells.Adaptive(40.dp) but did not help.

I think FlowRow is what you're looking for.

Example of FlowRow:

FlowRow {
    lodgingPropertyList.forEach {
        CustomeChipElement(
            text = it.name,
            isSelected = false,
            onClick = {},
        )
    }
}

There is also a version for lazy load which is called `ContextualFlowRow. Example of usage:

ContextualFlowRow(itemCount = lodgingPropertyList.size) { index ->
    CustomeChipElement(
        text = lodgingPropertyList[index],
        isSelected = false,
        onClick = {},
    )
}

Both options provide the same result:

You can read more about Flow layouts in Jetpack Compose here: https://developer.android.com/develop/ui/compose/layouts/flow#features-flow