JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
14.74k stars 1.08k forks source link

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

Open luludevmuniz opened 1 week ago

luludevmuniz commented 1 week ago

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

Versions

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 IMG-20240425-WA0001 IMG-20240425-WA0000

Captura de Tela 2024-04-25 às 15 40 03

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

luludevmuniz commented 1 week ago

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 commented 6 days ago

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

Schahen commented 6 days ago

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

luludevmuniz commented 6 days ago

@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.