fix(datepicker): fix responsive on Date Range Picker (#4127) (#4891)

Author: Mila

src/datepicker/bs-datepicker.scss

@@ -11,7 +11,6 @@
   position: relative;
   z-index: 1;
 
-
   &:after {
     clear: both;
     content: '';
@@ -355,7 +354,6 @@
 
   /* .bs-datepicker-multiple */
   &-multiple {
-    display: inline-block;
     border-radius: 4px 0 0 4px;
 
     & + & {
@@ -396,6 +394,13 @@
     padding: 15px;
   }
 
+  .bs-media-container {
+    display: flex;
+    @media(max-width: 768px) {
+      flex-direction: column;
+    }
+  }
+
   /*.bs-datepicker-custom-range */
   &-custom-range {
     padding: 15px;

src/datepicker/themes/bs/bs-datepicker-view.html

@@ -5,7 +5,7 @@
     <!--calendars-->
     <div class="bs-calendar-container" [ngSwitch]="viewMode | async" role="application">
       <!--days calendar-->
-      <div *ngSwitchCase="'day'">
+      <div *ngSwitchCase="'day'" class="bs-media-container">
         <bs-days-calendar-view
           *ngFor="let calendar of (daysCalendar | async)"
           [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1"
@@ -19,7 +19,7 @@
       </div>
 
       <!--months calendar-->
-      <div *ngSwitchCase="'month'">
+      <div *ngSwitchCase="'month'" class="bs-media-container">
         <bs-month-calendar-view
           *ngFor="let calendar of (monthsCalendar | async)"
           [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1"
@@ -32,7 +32,7 @@
       </div>
 
       <!--years calendar-->
-      <div *ngSwitchCase="'year'">
+      <div *ngSwitchCase="'year'" class="bs-media-container">
         <bs-years-calendar-view
         *ngFor="let calendar of (yearsCalendar | async)"
         [class.bs-datepicker-multiple]="(daysCalendar | async )?.length > 1"