I have a Rive file. But when rendering it, it needs the space required for the animation to be displayed. It happens that I only want that it occupies the space of the icon and that it does not include all the space for the animation. I have tried several ways but I can't find the way to do it.

In the pictures the blue background at least the height is the space required to make the animation. And this is how it is rendered, In the first one is with a smaller size the icon is adjusted to that size since it needs its required space for the animation. In the second one you can see how the animation is rendered in the required space. What I want to do is that it does not need all the space in blue, only that of the icon, discarding the space that it needs for the animation. Is this possible?

My code:

@Composable
fun BoxScope.VideoView(
    mediaPlayer: Player,
    scrubberPlayer: Player,
    showVideo: Boolean,
    videoId: String,
    videoResolution: VideoState.Resolution,
    isLikedVideo: Boolean,
    likes: String,
    shares: String,
    animatedEffect: AnimatedEffect,
    timeBarState: TimeBarState,
    onIntent: (SportsCenterForYouIntent) -> Unit,
) {

    var animation: RiveAnimationView? by remember { mutableStateOf(null) }

    if (showVideo) {
        VideoSurfaceView(
            modifier = Modifier
                .fillMaxSize(),
            mediaPlayer = mediaPlayer,
            videoResolution = videoResolution,
            onDoubleTapLike = {
                animation?.fireState("stateMachine", "tapTrigger")
            },
            onTapPlayPauseVideo = { onIntent(SportsCenterForYouIntent.TogglePlayPause) }
        )
        PlayPauseIcon(
            animatedEffect = animatedEffect,
            modifier = Modifier.align(Alignment.Center),
        )
        TimeBar(
            scrubberPlayer = scrubberPlayer,
            timeBarState = timeBarState,
            videoResolution = videoResolution,
            modifier = Modifier.align(Alignment.BottomCenter),
            onIntent = onIntent,
        )
        ContentReaction(
            modifier = Modifier
                .padding(bottom = 96.dp, end = 14.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red),
            isLikedVideo = isLikedVideo,
            likes = likes,
            shares = shares,
            toggleLikeUnlikeClick = {
                onIntent(SportsCenterForYouIntent.ToggleLikeUnlike(videoId))
            },
            shareContentClick = {
                onIntent(SportsCenterForYouIntent.ShareContent(videoId))
            },
            onInit = {view ->
                animation = view
            }
        )
    }
}

@Composable
fun ContentReaction(
    modifier: Modifier = Modifier,
    isLikedVideo: Boolean,
    likes: String,
    shares: String,
    toggleLikeUnlikeClick: () -> Unit,
    shareContentClick: () -> Unit,
    onInit: (RiveAnimationView) -> Unit
) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        LikeReaction(
            riveResource = R.raw.likebutton_03,
            artboardName = "heart_Particle",
            stateMachineName = "stateMachine",
            isLikedVideo = isLikedVideo,
            likes = likes,
            toggleLikeUnlike = toggleLikeUnlikeClick,
            onInit = onInit
        )
        Spacer(Modifier.height(24.dp))
        IconButton(
            R.drawable.share_social_fill,
            onClick = shareContentClick,
            contentDescription = "Share"
        )
        Text(
            text = shares,
            fontSize = 10.sp,
            lineHeight = 14.sp,
        )
    }
}

@Composable
fun LikeReaction(
    @RawRes riveResource: Int,
    autoplay: Boolean = false,
    artboardName: String? = null,
    animationName: String? = null,
    stateMachineName: String? = null,
    fit: Fit = Fit.CONTAIN,
    alignment: RiveAlignment = RiveAlignment.CENTER,
    loop: Loop = Loop.AUTO,
    contentDescription: String? = null,
    isLikedVideo: Boolean,
    likes: String,
    modifier: Modifier = Modifier,
    toggleLikeUnlike: () -> Unit,
    onInit: (RiveAnimationView) -> Unit
) {

    val semantics = if(contentDescription != null) {
        Modifier.semantics {
            this.contentDescription = contentDescription
            this.role = Role.Button
        }
    } else {
        Modifier
    }

    AndroidView(
        modifier = modifier
            .size(96.dp)
            .background(Color.Blue)
            .clipToBounds()
            .then(semantics),
        factory = { context ->
            RiveAnimationView(context).apply {
                setRiveResource(
                    riveResource,
                    artboardName,
                    animationName,
                    stateMachineName,
                    autoplay,
                    fit,
                    alignment,
                    loop
                )
                setBooleanState(stateMachineName ?: "", "hasLiked", isLikedVideo)
                //addEventListener(RiveEventListener(toggleLikeUnlike))
                registerListener(RiveAnimationListener(toggleLikeUnlike))
            }
            //LowLevelRiveView(context)
        },
        update = { view ->
            onInit(view)
        }
    )
    Spacer(Modifier.height(4.dp))
    Text(
        text = likes,
        fontSize = 10.sp,
        lineHeight = 14.sp,
    )
}