Alignment issue with the following snippet:

@Composable
fun TestLayout() {
  Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth()) {
    Text("line1")
    Divider()
    Box(modifier = Modifier.border(width = 1.dp, color = Color.Blue), contentAlignment = Alignment.Center) {
      Text("0", style = MaterialTheme.typography.h1)
      CircularProgressIndicator(
        progress = 1.0F,
        strokeWidth = 10.dp,
        modifier = Modifier.size(100.dp, 100.dp)
      )
    }
    Divider()
    Text("line3")
  }
}

This generates the following rendering: 1. why is the circle sticking out of the box? 2. why is the 0 not centered (which is what I am trying to do)?

1. Probably it is a bug of

CircularProgressIndicator

. Because

Box(
    modifier = Modifier.border(10.dp, Color.Red, CircleShape).size(100.dp, 100.dp)
)

works as expected. You can fill an issue here 2. MaterialTheme.typography.h1 has

letterSpacing = (-1.5).sp

But even without it it will not be perfectly aligned because of this