Modal has different insets between Android vs iOS

[arok]

I have this code of base modal sheet in my app

ModalBottomSheet(
        state = state,
        onDismiss = onDismissed,
    ) {
        Scrim()
        Sheet(
            modifier = Modifier
                .statusBarsPadding()
                .padding(sheetPadding)
                .shadow(4.dp, RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
                .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
                .background(Color.White)
                .widthIn(max = 640.dp)
                .fillMaxWidth()
                .imePadding()
        ) {
              content()
        }
    }

On Android it looks like this (status bar is not covered by the sheet)

On iOS like this (status bar is partially covered by the sheet)

This happens only if software keyboard is visible. Found working solution so far is to set DialogProperties.useSoftwareKeyboardInset to true

So it would be nice to be able to control DialogProperties of Modals.

[alexstyl]

Heya. Thanks for opening this issue.

Why do you need to be able to control the dialog properties of the modal?

If I am getting this right, the real issue here (and why you started digging into impl details) is that the behavior is different between android and ios, correct? Wouldn't you prefer the behavior to be the same without having to deal with properties?

[arok]

Correct, would be super to have the same behavior (or at least an option to control/fix it by ourself) But as I understood the root of issue is not in the library (or even it's expected behavior if Dialog on iOS)

[alexstyl]

A promise of the lib is consistent behavior across all platforms, so this is a bug that needs to be fixed :)

The option to fix it yourself is by having the source code (as you did in your case, you modified it)

[alexstyl]

That being said, it looks like a great contribution candidate.

If you have tested on your end that this is the solution, feel free to open a PR

[alexstyl]

I've tried your provided code with and without the statusBarPadding() and I see that everything is working as expected.

For content I used:

                Box(Modifier.fillMaxWidth().height(2000.dp), contentAlignment = Alignment.TopCenter) {
                    DragIndication(
                        modifier = Modifier.padding(top = 22.dp)
                            .background(Color.Black.copy(0.4f), RoundedCornerShape(100))
                            .width(32.dp)
                            .height(4.dp)
                    )
                }

Can you try the specific content and let me know how it behaves?

with padding	without padding

[arok]

As I mentioned in the original post the issue can be reproduced only if keyboard is active (in my case I have TextEdit in the sheet). When keyboard is hidden all good (your case).

[alexstyl]

Thanks for clarifying @arok. The issue has been fixed and will be available in the next release

[arok]

Many thanks @alexstyl

[alexstyl]

I am re-opening this as it seems like a bug from Compose Multiplatform: https://youtrack.jetbrains.com/issue/CMP-8435/Dialogs-content-with-statusBarsPadding-are-getting-out-of-bounds

I have reverted the inset handling from the Modal (useSoftwareKeyboardInset = false) so that developers can have full control over the UI using the respective paddings.

[alexstyl]

~~Seems like a fix for this will be available in CMP 1.9.0-beta02~~ that didn't happen

[alexstyl]

The CMP issue is resolved in 1.10.0-alpha.

Will keep this issue open until a version of Unstyled is shipped with the fix