How do I fix ConstraintLayout that include Balloon(gives strange results) in jetpack compose?

Question

I'm trying to make a help pop ups in my first app. the problem that came up after making the pop up work is that the icon which I'm using becomes a button taking up whole screen height. I'm using the only code I found for balloon popups in jetpack compose. the layout is fine until I add the BalloonAnchor. this is the code:

@Composable
fun GiveHelp(helpText: String) {
Surface{
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current

    ConstraintLayout {
        val (icon, text) = createRefs()
        Icon(
            modifier = Modifier
                .constrainAs(icon) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                },
            painter = painterResource(id = R.drawable.ic_help),
            contentDescription = "help Icon"
        )
        Text(
            modifier = Modifier
                .constrainAs(text) {
                    top.linkTo(icon.top)
                    start.linkTo(icon.end)
                    bottom.linkTo(icon.bottom)
                }
                .padding(horizontal = 10.dp),
            text = "Is your task:"
        )
        BalloonAnchor(
            reference = icon,
            modifier = Modifier
                .aspectRatio(0.1f),
            balloon = BalloonUtils.getTitleBalloon(
                context = context,
                title = helpText,
                lifecycle = lifecycleOwner
            ),
            onAnchorClick = { balloon, anchor -> balloon.showAlignTop(anchor) }
        )
    }
}
} 

Answer 1

The problem here is the aspectRatio you are using in the Modifier of BalloonAnchor. Try something like Modifier.aspectRatio(0.99f). Using this, your Icon will not take the entire screen height.
Or, your can use something like below code to get a desirable look.

BalloonAnchor(
    reference = icon,
    modifier = Modifier
        .height(40.dp),
    balloon = BalloonUtils.getTitleBalloon(
        context = context,
        title = helpText,
        lifecycle = lifecycleOwner
    ),
    onAnchorClick = { balloon, anchor -> balloon.showAlignTop(anchor) }
)