I accidentally posted my question to the wrong cha...

# compose-web

[Caden Howell]

I accidentally posted my question to the wrong channel, so am reposting here on the advice of a channel member.

I have been programming backend springboot services in Kotlin for about 18 months and decided to try to explore and demo an app using Kotlin webassembly on the front end for my team. I think I have a compose question. I followed the instructions to create this app: https://kotlinlang.org/docs/wasm-get-started.html#generate-artifacts and I'm trying to add to it. When I changed the background color and added a TopAppBar it became clear that the content doesn't fill the entire page. (Code in thread)

I compare it to the wasm project here: https://github.com/JetBrains/compose-multiplatform/tree/master/components/resources/demo and this project takes up the whole window but I can't figure out why the project i'm working with does not.

[Caden Howell]

This is how I updated App.kt, minus the color changes.

package com.entegral.demo

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Scaffold
import androidx.compose.material.TextButton

import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.* // replacing this with imports causes errors!
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource

import im_kotlin_multiplatform_demo.composeapp.generated.resources.Res
import im_kotlin_multiplatform_demo.composeapp.generated.resources.compose_multiplatform

@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
    MaterialTheme {
        Scaffold(
            modifier = Modifier.fillMaxSize(),
            topBar = {
                TopAppBar(

                    title = { Text("My App") },
                    actions = {
                        IconButton(onClick = { /* Action on click */ }) {
                            Icon(Icons.Filled.Search, contentDescription = "Search")
                        }
                        IconButton(onClick = { /* Another action */ }) {
                            Icon(Icons.Filled.Settings, contentDescription = "Settings")
                        }
                    }
                )
            }) { AnimatedLogoPane() }
    }
}

@OptIn(ExperimentalResourceApi::class)
@Composable
fun AnimatedLogoPane() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        Column(
            Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally) {
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            OutlinedButton(onClick = { showContent = !showContent }) {
                Text("Outlined Button")
            }
            TextButton(onClick = { showContent = !showContent }) {
                Text("Text Button")
            }
            AnimatedVisibility(showContent) {
                val greeting = remember { Greeting().greet() }
                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}

[Pablichjenkov]

You have this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[Caden Howell]

gratitude thank you

[Caden Howell]

I don't see that in my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compose App</title>
    <script type="application/javascript" src="skiko.js"></script>
    <script type="application/javascript" src="composeApp.js"></script>
</head>
<body>
<canvas id="ComposeTarget"></canvas>
</body>
</html>

but I do see it in these build files:

❯ grep -iR "scale=1.0" *
build/js/node_modules/mocha/lib/browser/template.html:    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
build/js/node_modules/serve-index/public/directory.html:    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

But I think these are for testing and serving the directory listings page

[Caden Howell]

Not sure if this helps, but the canvas element seems to take up the whole page, but the contents do not

[Pablichjenkov]

Check if this is the same problem:
https://kotlinlang.slack.com/archives/C01F2HV7868/p1712954845000049?thread_ts=1712954845.000049&cid=C01F2HV7868

[Caden Howell]

I'm not sure if that is the same issue, since I'm using a desktop browser, and the ticket refers to mobile browsers. Also I noticed they proposed using Kotlin/JS instead of Kotlin/wasm, which I'd rather not do because I want to present to my coworkers on the progress of Kotlin/wasm.

I've noticed that if I zoom out to 80% on chrome, it takes up the whole window. But at 100% it seems to take up only 80% of the window. I tried removing everything except for the scaffolding but it doesn't appear to have made a difference

@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
    var drawerOpen by remember { mutableStateOf(false) } // Track drawer state

    MaterialTheme (){
        Scaffold(modifier = Modifier.fillMaxSize().border(1.dp, Color.Blue)){
                Text("test")
        }
    }
}

[Pablichjenkov]

Interesting 🤔, I would open an issue at this point. I think it may have to do with the browser. I haven't noticed it and I use chrome. Perhaps is the zoom %, I got to check