Random spaces in Jetpack Compose

Question

While working on a composable function with Jetpack Compose, I can see that some elements have random extra spaces added to it. It seems that the IconButton has this extra padding. Can't figure out why it's happening.

See:

My code:

    Column(
        modifier = modifier
            .padding(
                top = padding.calculateTopPadding(),
                bottom = padding.calculateBottomPadding()
            )
            .background(MaterialTheme.colorScheme.background)
    ) {

        Row(
            modifier = Modifier.fillMaxWidth()
                .padding(horizontal = Spacing.m, vertical = 0.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = "Browse",
                modifier = Modifier
                    .padding(0.dp),
                color = MaterialTheme.colorScheme.onBackground,

                style = TextStyle(
                    fontSize = 32.sp,
                ),
                fontWeight = FontWeight.SemiBold
            )

            IconButton(
                modifier = Modifier.padding(0.dp),
                onClick = { /*TODO*/ }
            ) {
                Icon(
                    imageVector = Icons.Filled.FilterAltOff,
                    contentDescription = stringResource(R.string.filters)
                )
            }
        }
    }

There are no other components so far and modifier passed from the containing function should not have any influence on this Row.

Answer 1

That spacing is to ensure min touch target size.

You will not face this problem if you replace IconButton with any other non-clickable component. This padding is added in the source code of IconButton and you cannot control it as there is no modifier parameter to IconButton.

If you still want to remove this padding, a work around would be to add .minimumInteractiveComponentSize() to modifier of your Text.