Why Jetpack Compose preview and emulator show different result?

Preview:

Virtual device:

Code:

@Composable
fun ChatView(
    recentChat: RecentChat,
    onClick: () -> Unit
) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
    ) {

        Image(...)
        Column {

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(recentChat.user.userName, maxLines = 1)
                Text(
                    text = timestamp,
                    fontSize = 12.sp
                )
            }

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(
                    text = recentChat.chat.lastMessage,
                    maxLines = 1,
                    modifier = Modifier.weight(1f)
                )

                if (recentChat.newMessagesCount > 0) {
                    Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .defaultMinSize(20.dp, 20.dp)
                            .background(Color(0xFF65B343), CircleShape)
                            .padding(2.dp)
                    ) {
                        Text(
                            text = "${recentChat.newMessagesCount}",
                            fontSize = 14.sp
                        )
                    }
                }
            }

        }


    }

}

View is simple. Higher in compose hierarchy only Screen which contains list of this views. Screen with list of items doesn't affect on their size or padding. Where's the mistake?

Solution

Problem was in Theme, removing it solve the problem. Yet didn't know which part of it cause such veird behavior but will dig deeper into it.

UPD: Ok, theme adding multiple different paddings on interactive elements and in this specific situation lineHeight to text.

To avoid it without disabling theme can be used some approaches:

Set lineHeight in theme -> typography -> lineHeight (set same as text size)

val Typography = Typography(
    bodyLarge = TextStyle(
        fontSize = 16.sp,
        lineHeight = 16.sp
    )
)

Replace text style in all Text() composables down the hierarchy

CompositionLocalProvider(LocalTextStyle provides TextStyle.Default) {
    //your composables
}

Replace text style in current Text()

Text(
    ... ,
    style = TextStyle.Default
)