This is what it looks like on the phone

Weird colors for debugging purposes

I have this code for it:

Scaffold(
        modifier = Modifier.statusBarPadding(),
        topBar = {
            Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.background(Color.Gray)) {
                Text(
                    text = stringResource(R.string.recoverAccount_title),
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.h6,
                    color = MaterialTheme.colors.onHeader,
                    modifier = modifier.weight(1f).background(Color.Red)
                )
                IconButton(
                    onClick = { viewModel.onNavigateBack() },
                    modifier = Modifier.background(Color.Blue)
                ) {
                    Icon(
                        imageVector = Icons.Filled.Close,
                        contentDescription = stringResource(R.string.recoverAccount_closeEmailSent),
                        tint = MaterialTheme.colors.onSurface
                    )
                }
            }
        }
    ) {
// The screen content
}

This lays out the way I expect it to in the preview, but on my phone which is a Pixel 6 running Android 12, it is looking like the picture above

Here is what the preview looks like and what I’m wanting it to look like

I can’t figure out why the Row height is so much more on the phone and why the Text is not Centered

I actually need to use a Box instead of a row so the text is in the Center of the screen instead of the center of it’s space, but I still have the same height issue when using a Box

I tried a Row just to see if it would behave differently, though

That’s the problem

modifier vs Modifier strikes again!

Thanks! I’m the only Android dev on my team right now, so don’t have anyone else to find stuff like that.