Why is my Modal Bottom Sheet being positioned at the top of the screen?

Question

I have a simple modal bottom sheet using the following code, which presents a modal anchored at the bottom of the screen as one would expect, and it is 480.dp in height.

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

ModalBottomSheet(
    sheetState = sheetState,
    modifier = Modifier.heightIn(min = 480.dp, max = 480.dp),
    contentWindowInsets = { WindowInsets.systemBars }
) {
    // sheet content here
}

This worked fine when my project's compileSDK was 34 and produced something that looked like this (modal bottom sheet represented by blue box):

However, now that I've changed the project compileSDK to 35, I am getting strange behavior where the modal is being positioned at the top of the screen, like this (modal bottom sheet represented by red box):

Clearly this is the result of a change in SDK 35 but I'm not sure exactly what is causing this or how to fix it and get the modal positioned at the bottom of the screen again.

Answer 1

A similar behavior was already reported in Ticket #374247119 on the Google Issue Tracker.

It seems that setting a height on the ModalBottomSheet directly is glitchy in several ways. I found that it works well when you set the desired height on the first child of the ModalBottomSheet like this:

ModalBottomSheet(
    sheetState = sheetState,
    // don't set height using a Modifier directly on ModalBottomSheet   
    // modifier = Modifier.heightIn(min = 480.dp, max = 480.dp),
    onDismissRequest = {
        showBottomSheet = false
    }
) {
    Box(
        modifier = Modifier
            .height(480.dp)  // instead, apply height on first child Composable
            .fillMaxWidth()
    ) {
        // other Composables
    }
}

When you have skipPartiallyExpanded = true, the ModalBottomSheet will take exactly the height of the Box.