How can I ensure that the snackbar remains visible and not hidden behind the modal bottom sheet on Compose?

Question

TL-DR -> How can I ensure that the snackbar remains visible and not hidden behind the modal bottom sheet? What is the reason of it?

I'm creating a Snackbar using snackbarHost and snackBarHostState in a Scaffold. Additionally, in the content of the Scaffold, I conditionally include or remove a ModalBottomSheet based on a boolean value. My goal is to display the Snackbar while the ModalBottomSheet is visible. I can see the Snackbar when I dismiss the bottom sheet, but I can't see it while the bottom sheet is open. I tried adding zIndex(1000f) to the modifier of SnackbarHost. I also tried wrapping SnackbarHost in a Popup and a Box, but none of these solutions worked. How can I display the Snackbar above the ModalBottomSheet? And what is the reason of this situation? The structure of my code is similar to the following. (btw I use material3 library)

Scaffold(
        modifier = Modifier,
        snackbarHost = { SnackbarHost(snackBarHostState) },
        ...
    ) { 

        LaunchedEffect(key1 = message) {
            snackBarHostState.showSnackbar(
                message = message,
                duration = SnackbarDuration.Long
                )
            }

        ...

        if (showBottomSheet) {
            ModalBottomSheet(...) 
        }
    }

Answer 1

As mentioned here, a Modal Bottom Sheet, like dialogs, appears on top of the app content. Anything modal is drawn above the app content. That's why the Snackbar inside the Scaffold gets covered by the Modal Bottom Sheet.

If we want to display a Snackbar above the Modal Bottom Sheet, we should show it inside the content of this composable.