Compose Desktop AlertDialog rounded corners

Question

In a compose desktop application I'm displaying an AlertDialog with rounded corners shape but there still appears a white rectangle at the corners.

Here is my code:

AlertDialog(
    modifier = Modifier
        .size(280.dp, 260.dp)
        .shadow(elevation = 20.dp),
    onDismissRequest = {},
    buttons = {
        Button(
            modifier = Modifier.padding(start = 100.dp, top = 0.dp),
            onClick = { onClose() }
        ) {
            Text(
                text = "OK",
                textAlign = TextAlign.Center
            )
        }
    },
    title = {
        Text(
            "A Title"
        )
    },
    text = {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Some Text")
        }
    },
    shape = RoundedCornerShape(24.dp),
    backgroundColor = Color.Red
)

How can I get rid of the background white corners that are visible behind the dialog.

Answer 1

I was having an issue with .clip() not working because of the fact that Order of modifiers matters, the .clip() effect was being overwritten by my .background() modifier.

This doesn't work:

modifier = Modifier
    .background(MyTheme.colors.background)   // overwrites .clip()
    .clip(RoundedCornerShape(28.dp)),        // .clip() evaluated first

This does work:

modifier = Modifier
    .clip(RoundedCornerShape(28.dp))         // then we can safely .clip()
    .background(MyTheme.colors.background),  // .background() evaluated first

Here is what the AlertDialog code looks like:

AlertDialog(
    modifier = Modifier
        .clip(RoundedCornerShape(28.dp))
        .background(MyTheme.colors.background),
    onDismissRequest = { /* On Dismiss */ },
    text = { /* Text */ },
    buttons = { /* Buttons */ },
    title = { /* Title * / },
)

Just remember that the order of the modifiers is of significant importance.