I am making an Android application with Kotlin and Jetpack Compose. I'm currently stuck with making a DatePicker. The goal is to have the date picker calendar appear on the app screen itself, rather than as a dialog box. But, once I try to run the app on a smaller phone, the calendar overlaps the dates on it and they are not visible.

At the moment this is the code for date picker:

Column(
          modifier = Modifier
              .fillMaxWidth()
              .padding(8.dp),
          horizontalAlignment = Alignment.CenterHorizontally
      )
      {
          DatePicker(
              state = datePickerState,
              showModeToggle = false,
              modifier = modifier,
              title = null,
          )
      }

And when I call the composable function for the date picker I call it like this:

DatePickerView(
                  selectedDate,
                  onDateSelected = {
                      selectedDate = it
                      formattedDate = convertMillisToDate(it)
                  },
                  modifier = Modifier
                      .fillMaxWidth()
                      .padding(horizontal = 16.dp)
                      .align(Alignment.CenterHorizontally)
              )

On bigger screens everything is fine, but on smaller screens this problem comes. How can I dynamically resize the date picker, based on screen size?