I want to create a circular component which will contain a number (0..99), and will be displayed in a row of 5.

I need the circles to grow in size with their contents, depending on the number itself (1 takes up much less space than 88) and font size.

So far, I got the elements to "behave" when the font size is regular sized, but I can't get them to display properly when the font is larger. The number either "grows" outside of the circle container, or the container gets distorted entirely.

Current - Normal:

Current - Large (note the numbers sticking out of the container)

This is the code for the above:

@Composable
fun TestBadges(numbers: List<Int>, modifier: Modifier = Modifier) {
    Row(
        modifier = modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        numbers.forEachIndexed { index, number ->
            Badge(
                number = number, modifier = Modifier.weight(1f),
            )
            if (index != numbers.size - 1) {
                BlueDivider()
            }
        }
    }
}

@Composable
private fun Badge(
    number: Int,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier
            .aspectRatio(1f)
            .background(color = Color.Gray, shape = CircleShape),
        contentAlignment = Alignment.Center,
    ) {
        Text(
            text = number.toString(),
            style = MaterialTheme.typography.h4,
        )
    }
}

How do I achieve dynamically sized circles?