IssueTracker

Jetpack Compose version: 1.3.0-beta01

Jetpack Compose component(s) used: material3

Android Studio Build: Jellyfish

Kotlin version: 1.9.0

Steps to Reproduce or Code Sample to Reproduce:

1. Create a ModalBottomSheet, do not enable edge to edge
2. Make the content vertically bigger than the screen
3. Bottom sheet overlaps with status bar

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContent
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun ModalBottomSheetExample() {
    var showBottomSheet by remember { mutableStateOf(false) }

    Surface {
        Column {
            Button(
                onClick = { showBottomSheet = true },
                modifier = Modifier.padding(WindowInsets.safeContent.asPaddingValues())
            ) {
                Text(text = "Open bottom sheet")
            }

            if (showBottomSheet) {
                ModalBottomSheet(
                    sheetState = rememberModalBottomSheetState(
                        skipPartiallyExpanded = true,
                    ),
                    onDismissRequest = { showBottomSheet = false },
                    modifier = Modifier.padding(WindowInsets.statusBars.only(WindowInsetsSides.Top).asPaddingValues())
                ) {
                    LazyColumn {
                        items(List(100) { it }) {
                            Text(text = it.toString())
                        }
                    }
                }
            }
        }
    }
}

When using the bottom sheet with edge to edge mode, I can easily apply a padding modifier to avoid overlapping with the top status bar. However, in my current project I cannot (yet) enable edge to edge mode. Without that, the bottom sheet always overlaps with the status bar.