Dialogs are not rendered as expected when used inside a ImageComposeScene

[alexstyl]

Describe the bug
Dialogs are normally rendered on the center of the screen on Android. On Compose Desktop they are rendered in the center of a Window. However, when used within a ImageComposeScene the dialog is placed on the top left corner of the scene instead.

Composable content:

@Composable
fun Content() {
    Box(Modifier.fillMaxSize().background(Color.White), contentAlignment = Alignment.Center) {
        BasicText("Content")
        Dialog(onDismissRequest = { /* TODO */ }) {
            Box(Modifier.fillMaxSize().border(1.dp, Color.Red), contentAlignment = Alignment.BottomEnd) {
                Box(Modifier.background(Color.White).padding(8.dp)) {
                    BasicText("Dialog Content")
                }
            }
        }
    }
}

Using it in a window like this:

fun main() = singleWindowApplication {
    Content()
}

renders the following:

However, when used inside of a ImageComposeScene using this code:

fun main() = application {
    ImageComposeScene(width = 1200, height = 800) {
        Content()
    }.use { scene ->
        scene.render()
        val directory = File(".")
        directory.mkdirs()
        val fileName = "test.png"

        val file = File(directory, fileName)

        val image = scene.render(1000)
        val data = image.encodeToData()!!

        Files.write(file.toPath(), data.bytes)
        Desktop.getDesktop().open(File(file.absolutePath))
    }
}

the output image has the dialog on the top left corner like this:

Affected platforms

• Desktop: macOS

Versions
kotlin = "2.0.0-RC1"
compose = "1.6.10"

[okushnikov]

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