Responsive inline calendar

[solidevolution]

When using the datepicker in inline mode, the component is not responsive. This leads to layout issues on smaller screens, such as mobile devices. Users have to scroll or zoom in/out to interact with the datepicker, which results in a poor user experience.

I would like the datepicker to be responsive in inline mode. This could be achieved by:

• Adapting the size of the datepicker to fit the width of the container or screen.
• Automatically adjusting the layout (e.g., compacting the calendar or allowing for flexible column and row layouts).
• Ensuring that the datepicker remains fully interactive and accessible on smaller screens without requiring additional user effort.

Actual its possible to manually adjusting the size and CSS properties through css variables, but this solution is not responsive. A hack for me was the following but this isn't a good solution, more a bad hack!

  &.inline {
    &:deep(.dp__flex_display) {
      &:deep(> div:last-child) {
        width: 100%;
      }
    }

    &:deep(.dp--tp-wrap) {
      max-width: 100%;
    }
  }