Text with combinedClickable placed to upper edge of the row?

Question

I have the following in a Row with other text. Other text are positioned normally - center vertical, but this one is pushed to the upper edge. What's wrong?

Update: more complete code:

Not sure how to get by this complaint:

"It looks like your post is mostly code; please add some more details."

Row {
    SelectionContainer(
        modifier = Modifier
            .padding(10.dp)
            .weight(1f)
    ) {
        Text(
            text = "a word",
            textAlign = TextAlign.Center,
            fontSize = dimensionResource(dimen.subtitle_size).value.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .clickable {
                    playAudio()
                }
        )
    }
    DividerHorizontal()
    Text(
        text = "test",
        modifier = Modifier
            .padding(end = 5.dp)
            .combinedClickable(
                onClick = {
                    onClick()
                },
                onLongClick = {
                    onLongClick()
                }
            ),
        textAlign = TextAlign.Center,
        fontSize = dimensionResource(dimen.normal_text).value.sp,
    )
    DividerHorizontal()
    TagSpinner(::addTag)
}



@Composable
fun DividerHorizontal() {
    Divider(
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )
}

It doesn't allow including more code?

@Composable
inline fun TagSpinner(crossinline addTag : (String) -> Unit) {
    Box(
        modifier = Modifier
            .padding(horizontal = 10.dp)
    ) {
        var expanded by remember { mutableStateOf(false) }
        val tags: MutableList<String> = ArrayList(20)
        tags.add("All")
        if (tagTokens.isNotEmpty())
            tags.addAll(listOf(*tags()))
        Button(onClick = { expanded = !expanded }) {
            Text("Tag")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            tags.forEachIndexed { index, label ->
                DropdownMenuItem(onClick = {
                    expanded = false
                    addTag(tags[index])
                }) {
                    Text(text = label)
                }
            }
        }
    }
}

Answer 1

Nothing in your layout is actually positioned to center vertically. Text "a word" may appear so because it's enclosing composable, called SelectionContainer, has .padding(10.dp) set. This property pushes mentioned text away from top edge, thus appearing to be centered. Of course, if the height of the composable is just right. If you use a preview, it is obvious that it is not centered vertically. Here is the preview I used:

In order to have composables centered vertically, I suggest doing something like this:

Row(
    modifier = Modifier
        .wrapContentHeight(),
    verticalAlignment = Alignment.CenterVertically,
) {
    SelectionContainer(
        modifier = Modifier
//            .padding(10.dp) - this is not needed anymore
            .weight(1f)
    ) {
        ...
    }
    ...
}

You also need to change your DividerHorizontal into this:

@Composable
fun DividerHorizontal() {
    Divider(
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .width(1.dp)
    )
}

I believe the result is much closer to what you are trying to achieve: