Android Compose: Balloon content width and arrow positioning issues

[VB-Kiran]

Please complete the following information:

• Library Version - 1.6.13
• Affected Device(s) - All devices

Describe the Bug:

I'm facing two issues:

• Width Issue: The content inside balloonContent is not taking the full width of the balloon container, leaving unused space.
• Arrow Positioning: The balloon arrow is centering itself instead of aligning with the info icon that triggers the tooltip.

Expected Behavior:

• The balloon content should utilize the entire width of the balloon container
• The balloon arrow should align with the info icon, not center itself on the balloon

Sample code:

Tooltip(modifier = Modifier.padding(top = Theme.sizes.paddingMedium),
                title = uiTextResource(id = R.string.title),
                message = uiTextResource(id = R.string.message),
            ) { balloonWindow ->
                DetailItemWithInfo(
                    label = stringResource(R.string.label),
                    value = details.value,
                    showInfoIcon = false,
                    onInfoClick = {
                        balloonWindow.showAlignBottom()
                    },
                    modifier = Modifier.fillMaxWidth(),
                )
            }


@Composable
fun Tooltip(
    modifier: Modifier = Modifier,
    @DrawableRes icon: Int? = null,
    iconTint: Color? = Theme.colors.colorOnSecondary,
    title: UiText? = null,
    titleStyle: TextStyle = defaultToolTipTitleStyle(),
    message: UiText,
    messageStyle: TextStyle = Theme.typography.bodySmallStyle.copy(
        color = Theme.colors.colorOnSecondary
    ),
    backgroundColor: Color = Theme.colors.tooltipBackgroundColor,
    onDismiss: (() -> Unit)? = null,
    dismissWhenClicked: Boolean = true,
    dismissWhenTouchOutside: Boolean = true,
    showArrow: Boolean = true,
    leftMargin: Dp = Theme.sizes.paddingXXLarge,
    rightMargin: Dp = Theme.sizes.paddingXXLarge,
    cornerRadius: Dp = Theme.sizes.cornerRadius,
    content: @Composable (BalloonWindow) -> Unit
) {
    val builder = rememberBalloonBuilder {
        setElevation(0)
        setArrowElevation(0)
        setWidthRatio(1f)
        setMarginLeft(leftMargin.value.toInt())
        setMarginRight(rightMargin.value.toInt())
        setHeight(BalloonSizeSpec.WRAP)
        setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        setCornerRadius(cornerRadius.value)
        setBackgroundColor(backgroundColor)
        setBalloonAnimation(BalloonAnimation.FADE)
        setLifecycleOwner(lifecycleOwner)
        setIsVisibleArrow(showArrow)
        setArrowOrientation(ArrowOrientation.TOP)
        setDismissWhenClicked(dismissWhenClicked)
        setDismissWhenTouchOutside(dismissWhenTouchOutside)
        setOnBalloonDismissListener {
            onDismiss?.invoke()
        }
    }

    Balloon(
        modifier = modifier.background(Color.Yellow.copy(alpha = 0.7f)), // Added yellow background for debugging
        builder = builder,
        balloonContent = {
            Row(
                modifier = Modifier
                    .semantics(
                        mergeDescendants = true
                    ) {}
                    .padding(Theme.sizes.paddingMedium)
                    .fillMaxWidth()
                .background(Color.Black.copy(alpha = 0.7f)), // Added Black background for debugging
            ) {
                icon?.let {
                    Image(
                        res = icon,
                        modifier = Modifier
                            .padding(
                                top = Theme.sizes.paddingXSmall,
                                end = Theme.sizes.paddingSmall
                            )
                            .width(Theme.sizes.iconSmall)
                            .height(Theme.sizes.iconSmall),
                        colorFilter = if (iconTint != null) {
                            ColorFilter.tint(iconTint)
                        } else {
                            null
                        },
                        contentDescription = null
                    )
                }
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                ) {
                    title?.let {
                        Text(
                            modifier = Modifier
                                .padding(bottom = Theme.sizes.paddingSmall),
                            text = it,
                            textStyle = titleStyle
                        )
                    }
                    Text(
                        text = message,
                        textStyle = messageStyle
                    )
                }
            }
        }
    ) { balloonWindow ->
        content(balloonWindow)
    }
}

What I've Tried:

• Adding Modifier.fillMaxWidth() to the content composables
• Adjusting padding and margin values
• Different balloon builder configurations
• Added colored backgrounds for debugging: black background for balloonContent and yellow background for Balloonto visualize the space allocation