as you can see the widget below the searchBox also know as QuranPicker should draw a full screen dim when expanded and the rest of ui shouldn’t change size or position when it happens. I have tried so many ways but every approach has its shortcomings. I was thinking maybe it’s a better idea to create a custom scaffold or a custom column that handles this but I lack the knowledge. any ideas?

I got inspired by the official source codes of google for ModalBottomSheet in which it draws a Scrim on expansion of bottomsheet with animation. but as my root layout is not actually a Popup and it’s inside the scaffold body, I don’t have access to the topbar and bottomBar to draw scrim from there so I have repeated Scrim for those sections too which I consider not the best practice.

@Composable
fun Scrim(
    color: Color,
    onDismissRequest: () -> Unit,
    visible: Boolean,
) {

    if (visible) {
        val dismissSheet =
            Modifier
                .pointerInput(onDismissRequest) {
                    detectTapGestures {
                        Timber.i("child detected click")
                        onDismissRequest()
                    }
                }
                .clearAndSetSemantics { }

        Canvas(
            Modifier
                .fillMaxSize()
                .then(dismissSheet),
        ) {
            drawRect(color = color)
        }

    }
}