[Cfw] Layout doesn't start at the top when in mobile portrait mode

[luludevmuniz]

Describe the bug Some part of the layout is hidden when accessing the wasm generated website in a smartphone in portrait mode. Some elements goes outside the root composable bounds. (can be seen in https://luludevmuniz.github.io/po11nt-website-dev/)

Affected platforms

• Web (K/Wasm) - Canvas based API

Versions

• Kotlin version*: 2.0.0-RC1
• Compose Multiplatform version*: 1.6.10-beta02
• OS version(s)* (required for Desktop and iOS issues): Android, iOS
• Device (model or simulator for iOS issues): Samsung Galaxy M54, iPhone SE 3rd

To Reproduce Steps and/or the code snippet to reproduce the behavior:

@Composable
fun TwoBoxes() {
    Column(modifier = Modifier.fillMaxSize().padding(24.dp)) {
        Box(
            modifier = Modifier.weight(0.5f)
                .fillMaxSize()
                .border(
                    width = 1.dp,
                    color = MaterialTheme.colorScheme.outline
                )
        )
        Box(
            modifier = Modifier.weight(0.5f)
                .fillMaxSize()
                .border(
                    width = 1.dp,
                    color = MaterialTheme.colorScheme.outline
                )
        )
    }
}

Expected behavior Layout starting at the top of the window.

Screenshots

Additional context The issue does not occur when the smartphone is rotated in landscape mode.

[luludevmuniz]

Additional info: seems like the touch target does not match the composable location, you have to touch a bit down where it is showing.

[eymar]

the link you provided (https://luludevmuniz.github.io/Po11nt-site/) is 404. Could you please check that link is correct?

[Schahen]

@luludevmuniz can you please check agains the recently released 1.6.10-beta02 prelease version?

[luludevmuniz]

@eymar I'm sorry. I have created two website, one with the issue and the other with a fix.

NOT FIXED: https://luludevmuniz.github.io/po11nt-website-dev/ FIXED: https://luludevmuniz.github.io/po11nt-website/

In the fixed version I just added <meta name="viewport" content="width=device-width, initial-scale=1.0">, that I saw here, that I believe be the same issue as tracked here.

@shabunc Tested against 1.6.10-beta02, issue exists in the website and the TwoBoxes composable.

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.