How to prevent ModalBottomSheet from overlapping with the system buttons?

Question

I'm trying to add a ModalBottomSheet from Material3 into my app. I have a main screen implemented like this:

@Composable
fun MainScreen() {

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Scaffold(
            content = {},
            modifier = Modifier.fillMaxSize()
        )
    }
    SignInBottomSheet()
}

And SignInBottomSheet:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SignInBottomSheet(
) {

    ModalBottomSheet(
        onDismissRequest = {}
    ) {
        Column(
            modifier = Modifier.align(Alignment.CenterHorizontally)
        ) {
            Button(
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
                onClick = { /*TODO*/ }
            ) {
                Text(
                    text = "Log in",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
            Button(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
            ) {
                Text(
                    text = "Continue with Google",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}

The bottom sheet is visible when the app starts and when I tap outside of the bottom sheet, the bottom sheet is collapsed, but it stays at the bottom of the screen overlapping part of the system buttons.

I haven't added any remember object because I get the same behavior with the one, only difference is that the bottom sheet disappears after a moment (but still the snap is visible).

Bellow are the images of the opened and closed bottom sheet (take a close look at the bottom of the screen).

Open	Closed

Answer 1

Looks like this was resolved in Compose Material 3 version 1.2.0-alpha02.

Look under the following section in the release notes:

Add window insets parameter to ModalBottomSheet.

However, given it's an alpha library, not everyone will want to update to it.

I created an issuetracker for them to backport the fix into 1.1.0.

See: https://issuetracker.google.com/issues/284450382