I have a little button FloatingButtonView.kt that I embed into my MainActivity.kt.

It rotates when clicked and displays other buttons and vice versa when closed.

But, when I try to add text underneath the other buttons it displays when clicked, it jumps off to some other side of the screen.

That does not happen when the text is removed, it stays in position when clicked or not.

Is there anything in my code causing this?

WITHOUT TEXT:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FloatingButtonView() {
    var expanded by remember { mutableStateOf(false) }
    val coroutineScope = rememberCoroutineScope()
    val context = LocalContext.current

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomEnd,
    ) {
        if (expanded) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White.copy(alpha = 0.8f))
                    .clickable { expanded = false }
            )
        }

        Column(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(end = 16.dp, bottom = 90.dp), // Adjust the bottom padding here to raise the button
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            AnimatedVisibility(
                visible = expanded,
                enter = fadeIn() + slideInVertically(),
                exit = fadeOut() + slideOutVertically()
            ) {
                Column(
                    horizontalAlignment = Alignment.End,
                    verticalArrangement = Arrangement.spacedBy(16.dp)
                ) {
                    FloatingActionButton(
                        onClick = { openUrl(context, "https://example.com") },
                        modifier = Modifier.size(56.dp),
                        containerColor = Color.Red
                    ) {
                        Icon(painter = painterResource(id = R.drawable.ic_report_problem), contentDescription = "Report a Problem")
                    }
                    FloatingActionButton(
                        onClick = { openUrl(context, "https://www.facebook.com") },
                        modifier = Modifier.size(56.dp),
                        containerColor = Color.Blue
                    ) {
                        Icon(painter = painterResource(id = R.drawable.ic_facebook), contentDescription = "Facebook")
                    }
                    FloatingActionButton(
                        onClick = { sendEmail(context, "[email protected]") },
                        modifier = Modifier.size(56.dp),
                        containerColor = Color(0xFF9C27B0)
                    ) {
                        Icon(painter = painterResource(id = R.drawable.ic_email), contentDescription = "Email")
                    }
                    FloatingActionButton(
                        onClick = { dialPhoneNumber(context, "+1234567890") },
                        modifier = Modifier.size(56.dp),
                        containerColor = Color.Green
                    ) {
                        Icon(painter = painterResource(id = R.drawable.ic_phone), contentDescription = "Phone")
                    }
                }
            }

            FloatingActionButton(
                onClick = {
                    coroutineScope.launch {
                        expanded = !expanded
                    }
                },
                modifier = Modifier
                    .graphicsLayer(rotationZ = if (expanded) 180f else 0f),
                containerColor = Color(0xFF33ade6)
            ) {
                Icon(
                    painter = painterResource(id = if (expanded) R.drawable.ic_close else R.drawable.ic_more),
                    contentDescription = "More"
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun FloatingButtonViewPreview() {
    HSMAppTheme {
        FloatingButtonView()
    }
}

WITH TEXT:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FloatingButtonView() {
    var expanded by remember { mutableStateOf(false) }
    val coroutineScope = rememberCoroutineScope()

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomEnd,
    ) {
        if (expanded) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White.copy(alpha = 0.8f))
                    .clickable { expanded = false }
            )
        }

        Column(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(end = 16.dp, bottom = 90.dp), // Adjust the bottom padding here to raise the button
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            AnimatedVisibility(
                visible = expanded,
                enter = fadeIn() + slideInVertically(),
                exit = fadeOut() + slideOutVertically()
            ) {
                Column(
                    horizontalAlignment = Alignment.End,
                    verticalArrangement = Arrangement.spacedBy(16.dp)
                ) {
                    FloatingActionButtonWithText(
                        onClick = { /* Handle Report a Problem click */ },
                        iconId = R.drawable.ic_report_problem,
                        text = "Report",
                        backgroundColor = Color.Red
                    )
                    FloatingActionButtonWithText(
                        onClick = { /* Handle Facebook click */ },
                        iconId = R.drawable.ic_facebook,
                        text = "Facebook",
                        backgroundColor = Color.Blue
                    )
                    FloatingActionButtonWithText(
                        onClick = { /* Handle Email click */ },
                        iconId = R.drawable.ic_email,
                        text = "Email",
                        backgroundColor = Color(0xFF9C27B0)
                    )
                    FloatingActionButtonWithText(
                        onClick = { /* Handle Phone click */ },
                        iconId = R.drawable.ic_phone,
                        text = "Phone",
                        backgroundColor = Color.Green
                    )
                }
            }

            FloatingActionButton(
                onClick = {
                    coroutineScope.launch {
                        expanded = !expanded
                    }
                },
                modifier = Modifier.graphicsLayer(rotationZ = if (expanded) 180f else 0f),
                containerColor = Color(0xFF33ade6)
            ) {
                Icon(
                    painter = painterResource(id = if (expanded) R.drawable.ic_close else R.drawable.ic_more),
                    contentDescription = "More",
                    tint = Color.White, // Change icon color
                    modifier = Modifier.size(24.dp) // Change icon size
                )
            }
        }
    }
}

@Composable
fun FloatingActionButtonWithText(
    onClick: () -> Unit,
    iconId: Int,
    text: String,
    backgroundColor: Color
) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            modifier = Modifier
                .padding(end = 8.dp)
                .background(Color.White, shape = RoundedCornerShape(4.dp))
                .padding(horizontal = 8.dp, vertical = 4.dp)
                .shadow(4.dp)
        ) {
            Text(
                text = text,
                fontSize = 12.sp,
                fontWeight = FontWeight.Bold,
                color = Color.Black
            )
        }
        FloatingActionButton(
            onClick = onClick,
            containerColor = backgroundColor,
            modifier = Modifier.size(56.dp)
        ) {
            Icon(
                painter = painterResource(id = iconId),
                contentDescription = text,
                tint = Color.White, // Change icon color
                modifier = Modifier.size(24.dp) // Change icon size
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun FloatingButtonViewPreview() {
    HSMAppTheme {
        FloatingButtonView()
    }
}