I wonder if anyone has encountered an issue with the Sencha calendar where the year in the calendar disappears when the user zooms out to below 100%. There is no issue when zooming back to above 100%.

The image below shows the result when the user zooms out the screen.

This issue seems related to the width used in ..extclassictheme-neutralsasssrcpickerDate.scss which is datepicker-width. Currently, the datepicker-width used is 310px. I adjusted the width by adding to make it within the range of 333px to 334px, but another issue occurred where the month disappears.

// private vars
$datepicker-width: ($datepicker-item-width * 7) + horizontal($datepicker-border-width);
$datepicker-button-height: $button-small-icon-size + vertical($datepicker-month-button-padding);
$datepicker-monthpicker-months-width: floor(($datepicker-width - horizontal($datepicker-border-width)) / 2);
$datepicker-monthpicker-years-width: ceil(($datepicker-width - horizontal($datepicker-border-width)) / 2);
$datepicker-monthpicker-yearnav-height: $datepicker-monthpicker-item-height + vertical($datepicker-monthpicker-item-margin);
$datepicker-monthpicker-small-yearnav-height: $datepicker-monthpicker-small-item-height + vertical($datepicker-monthpicker-small-item-margin);

.#{$prefix}datepicker {
    @if $datepicker-border-width != 0 {
        border-width: $datepicker-border-width;
    }
    border-style: $datepicker-border-style;
    border-color: $datepicker-border-color;
    background-color: $datepicker-background-color;
    width: $datepicker-width;
}

Do you have any suggestions for a suitable width to use, or any ways to make the calendar more dynamic?