Shadow is being cut off

Question

I'm trying to apply elevation to an item, but the shadow is being cut off from the top and start, it's only applied fully to the end.

code:

  Surface(
        elevation = 12.dp,
        color = LocalColors.current.Ivory,
         shape = RoundedCornerShape(8.dp)
    ) {
        Row(
            modifier = modifier
                .fillMaxSize()
                .padding(vertical = 20.dp, horizontal = 24.dp),
        ) {
            Column(
                verticalArrangement = Arrangement.Center,
            ) {
                content()
            }
            Spacer(Modifier.weight(1f))
            PrimaryButton(
                onClick = {
                    if (isRemoveEnabled) {
                        onClickRemove()
                    } else {
                        onClickReleases()
                    }
                },
                backgroundColor = if (isRemoveEnabled) Color(0xFFFAEEF0) else Color(0xFF418DCB),
                border = BorderStroke(
                    width = if (isRemoveEnabled) 1.dp else 0.dp,
                    color = if (isRemoveEnabled) Color(0xFFE39393) else Color.Transparent
                ),
            ) {
                Text(
                    text = if (isRemoveEnabled) "Remove" else "Release",
                    style = LocalTextStyle.current.labelMedium,
                    color = if (isRemoveEnabled) Color(0xFFCC2B49) else Color.White,
                )
            }
           
            // more content
        }
    }

I've different ways to fix it, I tried to use the item without putting it in a lazy column but it appears the same way.

this is a screenshot:

any help?

edit:

I forgot to mention that this is happening on compose desktop.

Answer 1

You should add elevation into your item layout. For this, use shadow function

   Row(

    modifier = Modifier
        .fillMaxWidth(0.8f)
        .height(56.dp)
        .shadow(
            elevation = 4.dp,
            shape = RoundedCornerShape(8.dp)
        )
) { /* your code */ }

Answer 2

It seems it's a default behavior for shadow in Compose Desktop. The shadow is offsetted from top-left to bottom-right corner.

On my side, I tried to set elevation directly to Surface and via modifier

.shadow(elevation = 10.dp, shape = RoundedCornerShape(16.dp))

The result is the same as yours. Also the shadow might be cut-off at the bottom in your case, cause there is no enough space for shadow there. Try to play around with a padding.