[BUG] ActionSheet dimensions are too small for the Bootstrap and Material themes

[dimodi]

Bug Description

The Material theme contains (max-)width and (max-)height styles for the ActionSheet, which are too small for the Bootstrap and Material themes. As a result, an adaptive DatePicker either clips the Calendar or shows scrollbars.

Steps to Reproduce

Remove the <style> tags, select the Material theme, shrink the Preview pane and open the DatePicker.

https://blazorrepl.telerik.com/wJFPlROt114AFMK130

https://blazorrepl.telerik.com/cfbvPxuX12jP8Hoz36

Expected Behavior

The whole Calendar is visible.

Actual Behavior

The Calendar is clipped or triggers scrollbars.

Screenshots/Videos

https://supportheroes.telerik.com/ticket/1702894

Affected Component(s)

Please specify the component(s) where the bug occurs: ___________

Affected Suites

• All

Browser Information

• All browsers

Workaround

    div.k-actionsheet {
        height: 720px;
        max-height: 720px;
    }
    .k-adaptive-actionsheet .k-actionsheet-content,
    .k-adaptive-actionsheet .k-actionsheet-footer {
        width: min(100%, 480px);
    }

Additional Context

The customer claims the problem occurred after the Material design updates.

---

[Dimitar-Goshev]

In addition to the cut calendar, in jQuery, Angular and React the Close button for adaptive DatePicker, DateTimePicker and DateRangePicker is not visible

Use the following demos and set the phone dimensions:
https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/adaptive
https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/adaptive-rendering

Use the following Dojo and set Dimensions iPhone 14 Pro Max in Chrome emulator:
https://runner.telerik.io/fullscreen/YwkysOop

[yanmariomenev]

Also reported in 1713257 regarding the DateInputs Adaptive rendering with the Kendo Material theme.