Why doesn’t Jetpack Compose preview show padding bounds when hovering over Text composable?

I'm learning Jetpack Compose and working with Android Studio's preview feature. When I hover over a Text composable that has padding applied, the layout bounds (blue outline) only show the text content area and don't include the padding space

Code:

@Preview
@Composable
fun Home(modifier: Modifier = Modifier) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .background(Color.Magenta)
            .size(400.dp)
            .padding(50.dp)
    ) {
        Text(
            text = "Home",
            modifier = modifier
                .background(Color.Blue)    // Outer background (padding area)
                .padding(20.dp)
                .background(Color.Red)     // Inner background (text area)
        )
        Text(
            "downnnnn",
            modifier
                .background(Color.Green)
                .padding(20.dp)
                .background(Color.Yellow)
        )
        Text(
            "down",
            modifier.padding(20.dp)
        )
    }
}

What I'm seeing:

• When hovering over the Text in preview, only the text content is highlighted in blue
• The 20dp padding space around the text is not included in the layout bounds
• The outline doesn't show the full space that the padded Text occupies

What I expected:

• The layout bounds to include both the text content AND the padding space
• A complete visual representation of the space occupied by the padded composable

Questions:

1. Is this the intended behavior for Compose's layout inspection?
2. How can I visualize the complete bounds including padding?
3. Does this indicate a difference between how padding is handled internally versus other layout modifiers?

Any insights into why this happens and how to better debug layout bounds in Compose would be greatly appreciated! I'm currently learning Jetpack Compose and want to understand the layout system better.

Preview Image

This is expected behavior in Jetpack Compose Preview. When you hover over a composable, the layout bounds only show the measured content size, not the extra space added by padding. Padding just shifts the content inward, it doesn’t change the layout bounds shown in preview overlays.

To visualize the full space including padding, wrap the Text in a Box or use background colors (as you’re doing) to see the actual size visually. The layout system works correctly, it’s just the preview hover outline that doesn’t include padding.

For better debugging, use Modifier.border() or Modifier.drawBehind {} to draw custom outlines.