Jetpack Compose Material3 DatePickerDialog ui clipping on landscape mode

Question

I'm using Jetpack Compose and Material3 libraries with the 2025.01.00 BOM version, as you can see in the landscape mode UI elements clip through each other. Is there any way to fix them?

@OptIn(ExperimentalMaterial3Api::class)
@MyPreview
@Composable
private fun Preview() {
    DatePickerDialog(
        state = rememberDatePickerState(),
        onDismissRequest = {}
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun DatePickerDialog(
    modifier: Modifier = Modifier,
    state: DatePickerState,
    onDismissRequest: (Long?) -> Unit
) {
    androidx.compose.material3.DatePickerDialog(
        modifier = modifier,
        onDismissRequest = {
            val millis = state.selectedDateMillis
            if (millis != null) {
                onDismissRequest(millis)
            }
        },
        confirmButton = {
            Button(
                onClick = {
                    val millis = state.selectedDateMillis
                    if (millis != null) {
                        onDismissRequest(millis)
                    }
                },
                content = {
                    Text(
                        text = stringResource(android.R.string.ok),
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            )
        },
        content = {
            DatePicker(
                modifier = Modifier.fillMaxSize(),
                state = state
            )
        }
    )
}

Answer 1

use verticalScroll

content = {
    DatePicker(
        modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()),
        state = state
    )
}