Android Compose: Balloon content width and arrow positioning issues in skydoves/Balloon library

Problem Description I'm using the com.skydoves.balloon.compose library in my Android Compose project to display tooltip views. I'm facing two issues:

1. Width Issue: The content inside balloonContent is not taking the full width of the balloon container, leaving unused space.

2. Arrow Positioning: The balloon arrow is centering itself instead of aligning with the info icon that triggers the tooltip.

Expected Behavior

1. The balloon content should utilize the entire width of the balloon container

2. The balloon arrow should align with the info icon, not center itself on the balloon

Current Behavior

1. The content appears narrower than the balloon width, creating unwanted margins/padding

2. The arrow appears in the center of the balloon instead of pointing to the triggering info icon

Code Sample

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)
    }
}

Screenshot Screenshot showing both the width issue and arrow misalignment

Library version: 1.6.13

What I've Tried

1. Adding Modifier.fillMaxWidth() to the content composables

2. Adjusting padding and margin values

3. Different balloon builder configurations

4. Added colored backgrounds for debugging: black background for balloonContent and yellow background for Balloonto visualize the space allocation

5. Experimenting with different setArrowPosition() values

Questions:

1. How can I make the balloonContent take the full width of the balloon container?

2. How can I align the balloon arrow with the info icon instead of centering it on the balloon?