Setting minimum width in .widthIn() modifier does nothing

Question

Having tried setting the min width of a column composable in a dialog, it does nothing. It always takes up the width specified as the max width, regardless of where I place the widthIn() modifier in the dialog composable and even if the content's width is smaller than the max width. How can I fix this?

@Composable
fun DeleteUnitTypeDialog(
    addShoppingListItemScreenViewModel: IAddShoppingListItemScreenViewModel,
    onDismiss: () -> Unit,
    onConfirmClick: (ItemUnitType) -> Unit
) {
    val unitTypeList = addShoppingListItemScreenViewModel.itemUnitTypes.observeAsState().value

    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(
            dismissOnBackPress = true,
            dismissOnClickOutside = true,
            usePlatformDefaultWidth = false
        )
    ) {
        Surface(
            shape = MaterialTheme.shapes.medium,
            color = MaterialTheme.colors.surface,
            modifier = Modifier
                .padding(4.dp)
        ) {
            Column(
                modifier = Modifier
                    .widthIn(200.dp, 300.dp)
                    .heightIn(Dp.Unspecified, 500.dp)
                    .padding(top = 16.dp, start = 16.dp, end = 16.dp)
            ) {
                Text(
                    text = "Delete Unit Type",
                    fontSize = 18.sp,
                    color = MaterialTheme.colors.primary,
                    fontWeight = FontWeight.Bold
                )

                Divider()
                Spacer(modifier = Modifier.height(5.dp))

                LazyColumn {
                    if (addShoppingListItemScreenViewModel.itemUnitTypes.value?.size == 0) {
                        item { Text("List is empty.") }
                    }

                    itemsIndexed(
                        items = unitTypeList!!
                    ) { _, item ->
                        Row(horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
                            Text(modifier = Modifier.weight(1f), text = item.unitTypeName)
                            IconButton(
                                onClick = { onConfirmClick(item) }) {
                                Icon(
                                    imageVector = Icons.Filled.Delete,
                                    contentDescription = "Delete unit type"
                                )
                            }
                        }
                    }
                }

                Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                    TextButton(onClick = onDismiss) {
                        Text(text = stringResource(id = R.string.dialog_cancel), fontSize = 16.sp)
                    }
                }
            }
        }
    }
}

Answer 1

This is most likely because of Surface. It forces its constraints to first descendant.

You can check this answer out.

Since its max dimensions are dialog max width and height these dimensions will be forced to Column. You can add another Compoasble between to test that your Column will have correct dimensios.