Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
luludevmuniz opened this issue Apr 25, 2024 · 4 comments
Open
Assignees
Labels
bug Something isn't working web

Comments

@luludevmuniz
Copy link

luludevmuniz commented Apr 25, 2024

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
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 luludevmuniz added bug Something isn't working submitted labels Apr 25, 2024
@luludevmuniz
Copy link
Author

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

@Schahen Schahen self-assigned this Apr 26, 2024
@Schahen Schahen added web and removed submitted labels Apr 26, 2024
@eymar
Copy link
Collaborator

eymar commented Apr 29, 2024

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

@Schahen
Copy link
Collaborator

Schahen commented Apr 29, 2024

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

@luludevmuniz
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working web
Projects
None yet
Development

No branches or pull requests

3 participants