How can I use a ModalBottomSheetLayout inside a scrollable Column?

Question

For some reason, adding a ModalBottomSheetLayout inside a scrollable column doesn't work. Moving it out of the column works, but then the button is misplaced. Is there a way to make a ModalBottomSheetLayout work inside a scrollable column? I couldn't find anything about this.

val modalBottomSheetScope = rememberCoroutineScope()
    ModalBottomSheetLayout(
        sheetState = modalBottomSheetState,
        sheetContent = {
            Surface(modifier = Modifier.fillMaxHeight()) {
                Text("description")
            }
        },
    ) {
            TextButton(onClick = {
                modalBottomSheetScope.launch {
                    modalBottomSheetState.show()
                }
            }) {
                Text(text = "Read", color = Color.Black, style = TextStyle(textDecoration = TextDecoration.Underline))
            }
}

Adding this to a composable and inside a

Column(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
        .fillMaxSize()
) { 

}

Will not allow for the bottomsheet to appear

Answer 1

I found the solution. You need to encapsulate said scrollable column with the modalbottomsheet to have it show up instead of making the modalbottomsheet the child of the column. Like this:

val modalBottomSheetScope = rememberCoroutineScope()
    ModalBottomSheetLayout(
        sheetState = modalBottomSheetState,
        sheetContent = {
            Surface(modifier = Modifier.fillMaxHeight()) {
                Text("description")
            }
        },
    ) {

Column(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
        .fillMaxSize()
) { 

            TextButton(onClick = {
                modalBottomSheetScope.launch {
                    modalBottomSheetState.show()
                }
            }) {
                Text(text = "Read", color = Color.Black, style = TextStyle(textDecoration = TextDecoration.Underline))
            }
}
}