I’m trying to write a group section widget, it wraps its content with a thin border and shows a title, looks like:

But it actually looks like:

I expect the yellow part to be opaque, so it would cover the line, but it looks transparent, why?

My code:

@Composable
fun Section(title: String, content: @Composable ()->Unit) {
    Box(
        modifier = M
            .fillMaxWidth()
            .padding(2.dp)
            .border(1.dp, Color.Gray)
            .wrapContentHeight()
            .padding(10.dp)
    ) {
        Box(
            modifier = Modifier
                .wrapContentWidth()
                .offset(10.dp, (-18).dp)
                .background(Color.Yellow)
        ) {
            Text( text = title, fontSize = 12.sp, modifier = M.padding(10.dp, 0.dp))
        }
        content()
    }
}

// and usage:
Section(title = "Section Title") {
    Column {
        Text("row 1")
        Text("row 2")
        Text("row 3")
    }
}