I have an OutlinedTextField with a FilledIconButton next to it in a Row. I set the verticalAlignment to Alignment.CenterVertically on the Row, but the button is slightly offset to the top. When I look at the Preview, the OutlinedTextField seems to be in one container that fits its size, but the FilledIconButton seems to be centered in a bigger container that also contains the other container but has a bit of padding at the top, causing the button to be offset to the top.

@Composable
fun PlayerInputField(
    playerName: String,
    onNameChange: (String) -> Unit,
    onAddPlayer: () -> Unit,
    onDeletePlayer: () -> Unit,
    commited: Boolean = false,
) {
    Row(
        modifier = Modifier
            .padding(horizontal = 10.dp, vertical = 0.dp)
            .wrapContentSize(),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        OutlinedTextField(
            value = playerName,
            onValueChange = onNameChange,
            modifier = Modifier.weight(1f),
            label = { Text("Player Name") },
            singleLine = true
        )
        if (!commited) {
            FilledIconButton(onClick = onAddPlayer) {
                Icon(Icons.Filled.Add, "Add player")
            }
        } else {
            FilledIconButton(onClick = onDeletePlayer) {
                Icon(Icons.Filled.Clear, "Remove player")
            }
        }
    }
}

Preview View

I already tried to set the padding on the Row to 0 and moving the verticalAlignment from the Row to a Modifier on the button and text field, but nothing changed.