I’m trying to create a full screen dialog in Jetpack Compose, but the bottom goes behind the bottom system nav and adds a gray bar as well. I’ve tried different iterations of padding, insets, contentPadding and can’t get it to go away. Some iterations will have the top go behind the top system bar as well.

Here’s the code:

@Composable
fun MyFullScreenDialogContent(
    fullScreenDialogOpen: Boolean,
    onDismissRequest: () -> Unit
) {
    var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("", TextRange(0))) }

    if (fullScreenDialogOpen) {
        Dialog(
            onDismissRequest = {
                textFieldValue = TextFieldValue()
                onDismissRequest()
            },
            properties = DialogProperties(usePlatformDefaultWidth = false, decorFitsSystemWindows = false)
        ) {
            Surface(
                modifier = Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
//                modifier = Modifier.windowInsetsPadding(WindowInsets.navigationBars)
//                modifier = Modifier.padding(WindowInsets.navigationBars.asPaddingValues())
            ) {
                Column (
                    modifier = Modifier.windowInsetsPadding(WindowInsets.safeDrawing).fillMaxSize()
                ) {
                    // Title row with button and text
                    Row(
                        modifier = Modifier.padding(16.dp),
                        horizontalArrangement = Arrangement.spacedBy(16.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        // Checkmark button
                        ClickableIcon(
                            iconImageVector = Icons.Outlined.Check,
                            contentDescription = null,
                            onClick = { onDismissRequest() }
                        )
                        Text(
                            text = "Hello Dialog!!",
                            style = MaterialTheme.typography.headlineSmall
                        )
                    }
                    LazyColumn(
                        modifier = Modifier.imePadding(),
                        verticalArrangement = Arrangement.spacedBy(8.dp)
                    ) {
                        stickyHeader {
                            // Input TextField
                            TextField(
                                value = textFieldValue,
                                onValueChange = { value -> textFieldValue = value },
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .imePadding()
                            )
                        }

                        item {
                            // Results
                            Column(
                                modifier = Modifier
                                    .fillMaxWidth()
                            ) {
                                for (i in 1..10) {
                                    ListItem(
                                        headlineContent = { Text(text = "Result $i") },
                                        modifier = Modifier.clickable { },
                                        supportingContent = { Text(text = "Support $i") },
                                        trailingContent = {
                                            ClickableIcon(
                                                iconImageVector = Icons.Outlined.Link,
                                                contentDescription = null,
                                                onClick = { }
                                            )
                                        }
                                    )
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Bottom System Nav Strangeness