@syncfusion/blazor-themes 27.2.4 → 27.2.5

package/SCSS-Themes/bootstrap5.3-lite.scss

@@ -43297,6 +43297,12 @@ $treeview-item-active-check-color: $primary !default;
       }
     }
 
+    @if ($skin-name == 'fluent2') {
+      .e-checkbox-wrapper .e-frame {
+        margin-right: 0;
+      }
+    }
+
     .e-ul {
       margin: 0;
       padding: $treeview-root-ul-padding;
@@ -43491,6 +43497,15 @@ $treeview-item-active-check-color: $primary !default;
       }
     }
 
+    .e-navigable-text {
+      @if ($skin-name != 'Material3') {
+        padding: $treeview-text-padding;
+      }
+      @else {
+        padding: 0;
+      }
+    }
+
     .e-list-icon,
     .e-list-img {
       display: inline-block;
@@ -43507,6 +43522,10 @@ $treeview-item-active-check-color: $primary !default;
       & + .e-list-text {
         padding: $treeview-image-text-padding;
       }
+
+      & + .e-navigable-text {
+        padding: $treeview-image-text-padding;
+      }
     }
 
     .e-icon-collapsible,
@@ -43650,6 +43669,14 @@ $treeview-item-active-check-color: $primary !default;
         padding: $treeview-check-margin;
       }
 
+      .e-nav-wrapper {
+        padding: 0;
+      }
+
+      .e-checkbox-wrapper + .e-list-text .e-nav-wrapper:not(:has(.e-list-icon)) {
+        padding: 0;
+      }
+
       .e-list-icon,
       .e-list-img {
         @if $skin-name == 'bootstrap4' {
@@ -43779,6 +43806,10 @@ $treeview-item-active-check-color: $primary !default;
           padding: $treeview-rtl-check-margin;
         }
 
+        .e-nav-wrapper {
+          padding: 0;
+        }
+
         .e-list-icon,
         .e-list-img,
         .e-list-icon + .e-list-img {
@@ -61942,6 +61973,7 @@ $grid-checkmark-color: $primary-text-color !default;
       width: $grid-resize-border-width;
     }
 
+    & .e-rhelper,
     & .e-virtual-rhandler {
       z-index: 5;
     }
@@ -62071,7 +62103,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     .e-gridheader {
-      & tr:first-child th {
+      & tr:first-child th:not(.e-freezeleftborder, .e-freezerightborder) {
         border-top: 0 none;
       }
 
@@ -62468,8 +62500,8 @@ $grid-checkmark-color: $primary-text-color !default;
     }
   
     &.e-default:not(.e-rtl) tr {
-      & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder),
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder, .e-leftfreeze.e-freezeleftborder.e-focused),
+      & th.e-headercell:first-child:not(.e-firstcell, .e-headercell.e-frozen-left-border, .e-leftfreeze.e-freezeleftborder.e-focused),
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
       }
@@ -65107,6 +65139,14 @@ $grid-checkmark-color: $primary-text-color !default;
     .e-headercell,
     .e-detailheadercell {
       background-color: $grid-header-bg-color;
+
+      &.e-leftfreeze:not(.e-rowcell),
+      &.e-rightfreeze:not(.e-rowcell),
+      &.e-fixedfreeze:not(.e-rowcell) {
+        @if $grid-skin == 'bootstrap5.3' or $grid-skin == 'tailwind' {
+          background-color: $grid-header-bg-color;
+        }
+      }
     }
 
     .e-gridcontent {
@@ -65276,7 +65316,9 @@ $grid-checkmark-color: $primary-text-color !default;
 
     &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-        @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+        @if $grid-skin != 'material3' {
+          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+        }
       }
     }
 
@@ -82862,6 +82904,12 @@ $lg-desktop: 1399.98;
       padding-right: 1px;
       padding-top: 1px;
     }
+    @if ($skin-name == 'bootstrap4') {
+      padding-bottom: 0;
+      padding-left: 1px;
+      padding-right: 1px;
+      padding-top: 0;
+    }
     @if $skin-name == 'fluent2' {
       padding: 0 !important;/* stylelint-disable-line declaration-no-important */
       color: $pv-icon-color;

package/SCSS-Themes/bootstrap5.3.scss

@@ -58907,6 +58907,12 @@ $treeview-item-active-check-color: $primary !default;
       }
     }
 
+    @if ($skin-name == 'fluent2') {
+      .e-checkbox-wrapper .e-frame {
+        margin-right: 0;
+      }
+    }
+
     .e-ul {
       margin: 0;
       padding: $treeview-root-ul-padding;
@@ -59101,6 +59107,15 @@ $treeview-item-active-check-color: $primary !default;
       }
     }
 
+    .e-navigable-text {
+      @if ($skin-name != 'Material3') {
+        padding: $treeview-text-padding;
+      }
+      @else {
+        padding: 0;
+      }
+    }
+
     .e-list-icon,
     .e-list-img {
       display: inline-block;
@@ -59117,6 +59132,10 @@ $treeview-item-active-check-color: $primary !default;
       & + .e-list-text {
         padding: $treeview-image-text-padding;
       }
+
+      & + .e-navigable-text {
+        padding: $treeview-image-text-padding;
+      }
     }
 
     .e-icon-collapsible,
@@ -59260,6 +59279,14 @@ $treeview-item-active-check-color: $primary !default;
         padding: $treeview-check-margin;
       }
 
+      .e-nav-wrapper {
+        padding: 0;
+      }
+
+      .e-checkbox-wrapper + .e-list-text .e-nav-wrapper:not(:has(.e-list-icon)) {
+        padding: 0;
+      }
+
       .e-list-icon,
       .e-list-img {
         @if $skin-name == 'bootstrap4' {
@@ -59389,6 +59416,10 @@ $treeview-item-active-check-color: $primary !default;
           padding: $treeview-rtl-check-margin;
         }
 
+        .e-nav-wrapper {
+          padding: 0;
+        }
+
         .e-list-icon,
         .e-list-img,
         .e-list-icon + .e-list-img {
@@ -83663,6 +83694,7 @@ $grid-checkmark-color: $primary-text-color !default;
       width: $grid-resize-border-width;
     }
 
+    & .e-rhelper,
     & .e-virtual-rhandler {
       z-index: 5;
     }
@@ -83792,7 +83824,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     .e-gridheader {
-      & tr:first-child th {
+      & tr:first-child th:not(.e-freezeleftborder, .e-freezerightborder) {
         border-top: 0 none;
       }
 
@@ -84189,8 +84221,8 @@ $grid-checkmark-color: $primary-text-color !default;
     }
   
     &.e-default:not(.e-rtl) tr {
-      & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder),
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder, .e-leftfreeze.e-freezeleftborder.e-focused),
+      & th.e-headercell:first-child:not(.e-firstcell, .e-headercell.e-frozen-left-border, .e-leftfreeze.e-freezeleftborder.e-focused),
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
       }
@@ -86828,6 +86860,14 @@ $grid-checkmark-color: $primary-text-color !default;
     .e-headercell,
     .e-detailheadercell {
       background-color: $grid-header-bg-color;
+
+      &.e-leftfreeze:not(.e-rowcell),
+      &.e-rightfreeze:not(.e-rowcell),
+      &.e-fixedfreeze:not(.e-rowcell) {
+        @if $grid-skin == 'bootstrap5.3' or $grid-skin == 'tailwind' {
+          background-color: $grid-header-bg-color;
+        }
+      }
     }
 
     .e-gridcontent {
@@ -86997,7 +87037,9 @@ $grid-checkmark-color: $primary-text-color !default;
 
     &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-        @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+        @if $grid-skin != 'material3' {
+          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+        }
       }
     }
 
@@ -87825,7 +87867,9 @@ $grid-checkmark-color: $primary-text-color !default;
 
       &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @if $grid-skin != 'material3' {
+            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          }
         }
       }
     }
@@ -109601,6 +109645,12 @@ $lg-desktop: 1399.98;
       padding-right: 1px;
       padding-top: 1px;
     }
+    @if ($skin-name == 'bootstrap4') {
+      padding-bottom: 0;
+      padding-left: 1px;
+      padding-right: 1px;
+      padding-top: 0;
+    }
     @if $skin-name == 'fluent2' {
       padding: 0 !important;/* stylelint-disable-line declaration-no-important */
       color: $pv-icon-color;

package/SCSS-Themes/bootstrap5.scss

@@ -57798,6 +57798,12 @@ $treeview-item-active-check-color: $primary !default;
       }
     }
 
+    @if ($skin-name == 'fluent2') {
+      .e-checkbox-wrapper .e-frame {
+        margin-right: 0;
+      }
+    }
+
     .e-ul {
       margin: 0;
       padding: $treeview-root-ul-padding;
@@ -57992,6 +57998,15 @@ $treeview-item-active-check-color: $primary !default;
       }
     }
 
+    .e-navigable-text {
+      @if ($skin-name != 'Material3') {
+        padding: $treeview-text-padding;
+      }
+      @else {
+        padding: 0;
+      }
+    }
+
     .e-list-icon,
     .e-list-img {
       display: inline-block;
@@ -58008,6 +58023,10 @@ $treeview-item-active-check-color: $primary !default;
       & + .e-list-text {
         padding: $treeview-image-text-padding;
       }
+
+      & + .e-navigable-text {
+        padding: $treeview-image-text-padding;
+      }
     }
 
     .e-icon-collapsible,
@@ -58151,6 +58170,14 @@ $treeview-item-active-check-color: $primary !default;
         padding: $treeview-check-margin;
       }
 
+      .e-nav-wrapper {
+        padding: 0;
+      }
+
+      .e-checkbox-wrapper + .e-list-text .e-nav-wrapper:not(:has(.e-list-icon)) {
+        padding: 0;
+      }
+
       .e-list-icon,
       .e-list-img {
         @if $skin-name == 'bootstrap4' {
@@ -58280,6 +58307,10 @@ $treeview-item-active-check-color: $primary !default;
           padding: $treeview-rtl-check-margin;
         }
 
+        .e-nav-wrapper {
+          padding: 0;
+        }
+
         .e-list-icon,
         .e-list-img,
         .e-list-icon + .e-list-img {
@@ -82521,6 +82552,7 @@ $grid-checkmark-color: $primary-text-color !default;
       width: $grid-resize-border-width;
     }
 
+    & .e-rhelper,
     & .e-virtual-rhandler {
       z-index: 5;
     }
@@ -82650,7 +82682,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     .e-gridheader {
-      & tr:first-child th {
+      & tr:first-child th:not(.e-freezeleftborder, .e-freezerightborder) {
         border-top: 0 none;
       }
 
@@ -83047,8 +83079,8 @@ $grid-checkmark-color: $primary-text-color !default;
     }
   
     &.e-default:not(.e-rtl) tr {
-      & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder),
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder, .e-leftfreeze.e-freezeleftborder.e-focused),
+      & th.e-headercell:first-child:not(.e-firstcell, .e-headercell.e-frozen-left-border, .e-leftfreeze.e-freezeleftborder.e-focused),
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
       }
@@ -85686,6 +85718,14 @@ $grid-checkmark-color: $primary-text-color !default;
     .e-headercell,
     .e-detailheadercell {
       background-color: $grid-header-bg-color;
+
+      &.e-leftfreeze:not(.e-rowcell),
+      &.e-rightfreeze:not(.e-rowcell),
+      &.e-fixedfreeze:not(.e-rowcell) {
+        @if $grid-skin == 'bootstrap5.3' or $grid-skin == 'tailwind' {
+          background-color: $grid-header-bg-color;
+        }
+      }
     }
 
     .e-gridcontent {
@@ -85855,7 +85895,9 @@ $grid-checkmark-color: $primary-text-color !default;
 
     &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-        @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+        @if $grid-skin != 'material3' {
+          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+        }
       }
     }
 
@@ -86683,7 +86725,9 @@ $grid-checkmark-color: $primary-text-color !default;
 
       &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @if $grid-skin != 'material3' {
+            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          }
         }
       }
     }
@@ -108459,6 +108503,12 @@ $lg-desktop: 1399.98;
       padding-right: 1px;
       padding-top: 1px;
     }
+    @if ($skin-name == 'bootstrap4') {
+      padding-bottom: 0;
+      padding-left: 1px;
+      padding-right: 1px;
+      padding-top: 0;
+    }
     @if $skin-name == 'fluent2' {
       padding: 0 !important;/* stylelint-disable-line declaration-no-important */
       color: $pv-icon-color;

package/SCSS-Themes/calendars/calendar/fluent2-dark-lite.scss

@@ -53,12 +53,12 @@ $calendar-small-max-width: 212px !default;
 $calendar-small-min-width: 212px !default;
 $calendar-normal-max-width: 244px !default;
 $calendar-normal-min-width: 244px !default;
-$calendar-bigger-max-width: 280px !default;
-$calendar-bigger-min-width: 280px !default;
+$calendar-bigger-max-width: 300px !default;
+$calendar-bigger-min-width: 300px !default;
 $calendar-bigger-small-max-width: 276px !default;
 $calendar-bigger-small-min-width: 276px !default;
-$calendar-weeknumber-min-width: 262px !default;
-$calendar-weeknumber-bigger-width: 300px !default;
+$calendar-weeknumber-min-width: 280px !default;
+$calendar-weeknumber-bigger-width: 335px !default;
 $calendar-popup-padding: 0 !default;
 $calendar-popup-bigger-padding: 0 !default;
 
@@ -295,6 +295,10 @@ $calendar-focused-state-box-shadow: none !default;
 $calendar-focused-state-month-box-shadow: none !default;
 $calendar-selected-month-bg-color: $primary-lighter !default;
 
+.e-small:not(.e-bigger) .e-calendar.e-week-number {
+  min-width: 230px;
+}
+
 @include export-module('calendar-layout') { /*! calendar layout */
 
   #{&}ejs-calendar {

package/SCSS-Themes/calendars/calendar/fluent2-dark.scss

@@ -53,12 +53,12 @@ $calendar-small-max-width: 212px !default;
 $calendar-small-min-width: 212px !default;
 $calendar-normal-max-width: 244px !default;
 $calendar-normal-min-width: 244px !default;
-$calendar-bigger-max-width: 280px !default;
-$calendar-bigger-min-width: 280px !default;
+$calendar-bigger-max-width: 300px !default;
+$calendar-bigger-min-width: 300px !default;
 $calendar-bigger-small-max-width: 276px !default;
 $calendar-bigger-small-min-width: 276px !default;
-$calendar-weeknumber-min-width: 262px !default;
-$calendar-weeknumber-bigger-width: 300px !default;
+$calendar-weeknumber-min-width: 280px !default;
+$calendar-weeknumber-bigger-width: 335px !default;
 $calendar-popup-padding: 0 !default;
 $calendar-popup-bigger-padding: 0 !default;
 
@@ -295,6 +295,10 @@ $calendar-focused-state-box-shadow: none !default;
 $calendar-focused-state-month-box-shadow: none !default;
 $calendar-selected-month-bg-color: $primary-lighter !default;
 
+.e-small:not(.e-bigger) .e-calendar.e-week-number {
+  min-width: 230px;
+}
+
 @include export-module('calendar-layout') { /*! calendar layout */
 
   #{&}ejs-calendar {

package/SCSS-Themes/calendars/calendar/fluent2-highcontrast-lite.scss

@@ -53,12 +53,12 @@ $calendar-small-max-width: 212px !default;
 $calendar-small-min-width: 212px !default;
 $calendar-normal-max-width: 244px !default;
 $calendar-normal-min-width: 244px !default;
-$calendar-bigger-max-width: 280px !default;
-$calendar-bigger-min-width: 280px !default;
+$calendar-bigger-max-width: 300px !default;
+$calendar-bigger-min-width: 300px !default;
 $calendar-bigger-small-max-width: 276px !default;
 $calendar-bigger-small-min-width: 276px !default;
-$calendar-weeknumber-min-width: 262px !default;
-$calendar-weeknumber-bigger-width: 300px !default;
+$calendar-weeknumber-min-width: 280px !default;
+$calendar-weeknumber-bigger-width: 335px !default;
 $calendar-popup-padding: 0 !default;
 $calendar-popup-bigger-padding: 0 !default;
 
@@ -295,6 +295,10 @@ $calendar-focused-state-box-shadow: none !default;
 $calendar-focused-state-month-box-shadow: none !default;
 $calendar-selected-month-bg-color: $primary-lighter !default;
 
+.e-small:not(.e-bigger) .e-calendar.e-week-number {
+  min-width: 230px;
+}
+
 @include export-module('calendar-layout') { /*! calendar layout */
 
   #{&}ejs-calendar {

package/SCSS-Themes/calendars/calendar/fluent2-highcontrast.scss

@@ -53,12 +53,12 @@ $calendar-small-max-width: 212px !default;
 $calendar-small-min-width: 212px !default;
 $calendar-normal-max-width: 244px !default;
 $calendar-normal-min-width: 244px !default;
-$calendar-bigger-max-width: 280px !default;
-$calendar-bigger-min-width: 280px !default;
+$calendar-bigger-max-width: 300px !default;
+$calendar-bigger-min-width: 300px !default;
 $calendar-bigger-small-max-width: 276px !default;
 $calendar-bigger-small-min-width: 276px !default;
-$calendar-weeknumber-min-width: 262px !default;
-$calendar-weeknumber-bigger-width: 300px !default;
+$calendar-weeknumber-min-width: 280px !default;
+$calendar-weeknumber-bigger-width: 335px !default;
 $calendar-popup-padding: 0 !default;
 $calendar-popup-bigger-padding: 0 !default;
 
@@ -295,6 +295,10 @@ $calendar-focused-state-box-shadow: none !default;
 $calendar-focused-state-month-box-shadow: none !default;
 $calendar-selected-month-bg-color: $primary-lighter !default;
 
+.e-small:not(.e-bigger) .e-calendar.e-week-number {
+  min-width: 230px;
+}
+
 @include export-module('calendar-layout') { /*! calendar layout */
 
   #{&}ejs-calendar {

package/SCSS-Themes/calendars/calendar/fluent2-lite.scss

@@ -53,12 +53,12 @@ $calendar-small-max-width: 212px !default;
 $calendar-small-min-width: 212px !default;
 $calendar-normal-max-width: 244px !default;
 $calendar-normal-min-width: 244px !default;
-$calendar-bigger-max-width: 280px !default;
-$calendar-bigger-min-width: 280px !default;
+$calendar-bigger-max-width: 300px !default;
+$calendar-bigger-min-width: 300px !default;
 $calendar-bigger-small-max-width: 276px !default;
 $calendar-bigger-small-min-width: 276px !default;
-$calendar-weeknumber-min-width: 262px !default;
-$calendar-weeknumber-bigger-width: 300px !default;
+$calendar-weeknumber-min-width: 280px !default;
+$calendar-weeknumber-bigger-width: 335px !default;
 $calendar-popup-padding: 0 !default;
 $calendar-popup-bigger-padding: 0 !default;
 
@@ -295,6 +295,10 @@ $calendar-focused-state-box-shadow: none !default;
 $calendar-focused-state-month-box-shadow: none !default;
 $calendar-selected-month-bg-color: $primary-lighter !default;
 
+.e-small:not(.e-bigger) .e-calendar.e-week-number {
+  min-width: 230px;
+}
+
 @include export-module('calendar-layout') { /*! calendar layout */
 
   #{&}ejs-calendar {

package/SCSS-Themes/calendars/calendar/fluent2.scss

@@ -53,12 +53,12 @@ $calendar-small-max-width: 212px !default;
 $calendar-small-min-width: 212px !default;
 $calendar-normal-max-width: 244px !default;
 $calendar-normal-min-width: 244px !default;
-$calendar-bigger-max-width: 280px !default;
-$calendar-bigger-min-width: 280px !default;
+$calendar-bigger-max-width: 300px !default;
+$calendar-bigger-min-width: 300px !default;
 $calendar-bigger-small-max-width: 276px !default;
 $calendar-bigger-small-min-width: 276px !default;
-$calendar-weeknumber-min-width: 262px !default;
-$calendar-weeknumber-bigger-width: 300px !default;
+$calendar-weeknumber-min-width: 280px !default;
+$calendar-weeknumber-bigger-width: 335px !default;
 $calendar-popup-padding: 0 !default;
 $calendar-popup-bigger-padding: 0 !default;
 
@@ -295,6 +295,10 @@ $calendar-focused-state-box-shadow: none !default;
 $calendar-focused-state-month-box-shadow: none !default;
 $calendar-selected-month-bg-color: $primary-lighter !default;
 
+.e-small:not(.e-bigger) .e-calendar.e-week-number {
+  min-width: 230px;
+}
+
 @include export-module('calendar-layout') { /*! calendar layout */
 
   #{&}ejs-calendar {

package/SCSS-Themes/calendars/daterangepicker/fluent2-dark-lite.scss

@@ -115,7 +115,7 @@ $range-icon-bigger-padding: 0 !default;
 $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
-$range-calendar-bigger-max: 296px !default;
+$range-calendar-bigger-max: 320px !default;
 
 $range-header-label-size: $text-base !default;
 $range-bigger-header-label-size: $text-lg !default;
@@ -317,6 +317,10 @@ $range-bigger-small-icon-container-min-width: 34px !default;
 $range-bigger-small-icon-container-min-height: 34px !default;
 $range-bigger-small-icon-border-radius: 20px !default;
 
+.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+  max-width: 350px;
+}
+
 @include export-module('daterangepicker-layout') {
 
   .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,

package/SCSS-Themes/calendars/daterangepicker/fluent2-dark.scss

@@ -115,7 +115,7 @@ $range-icon-bigger-padding: 0 !default;
 $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
-$range-calendar-bigger-max: 296px !default;
+$range-calendar-bigger-max: 320px !default;
 
 $range-header-label-size: $text-base !default;
 $range-bigger-header-label-size: $text-lg !default;
@@ -317,6 +317,10 @@ $range-bigger-small-icon-container-min-width: 34px !default;
 $range-bigger-small-icon-container-min-height: 34px !default;
 $range-bigger-small-icon-border-radius: 20px !default;
 
+.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+  max-width: 350px;
+}
+
 @include export-module('daterangepicker-layout') {
 
   .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,

package/SCSS-Themes/calendars/daterangepicker/fluent2-highcontrast-lite.scss

@@ -115,7 +115,7 @@ $range-icon-bigger-padding: 0 !default;
 $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
-$range-calendar-bigger-max: 296px !default;
+$range-calendar-bigger-max: 320px !default;
 
 $range-header-label-size: $text-base !default;
 $range-bigger-header-label-size: $text-lg !default;
@@ -317,6 +317,10 @@ $range-bigger-small-icon-container-min-width: 34px !default;
 $range-bigger-small-icon-container-min-height: 34px !default;
 $range-bigger-small-icon-border-radius: 20px !default;
 
+.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+  max-width: 350px;
+}
+
 @include export-module('daterangepicker-layout') {
 
   .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,

package/SCSS-Themes/calendars/daterangepicker/fluent2-highcontrast.scss

@@ -115,7 +115,7 @@ $range-icon-bigger-padding: 0 !default;
 $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
-$range-calendar-bigger-max: 296px !default;
+$range-calendar-bigger-max: 320px !default;
 
 $range-header-label-size: $text-base !default;
 $range-bigger-header-label-size: $text-lg !default;
@@ -317,6 +317,10 @@ $range-bigger-small-icon-container-min-width: 34px !default;
 $range-bigger-small-icon-container-min-height: 34px !default;
 $range-bigger-small-icon-border-radius: 20px !default;
 
+.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+  max-width: 350px;
+}
+
 @include export-module('daterangepicker-layout') {
 
   .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,

package/SCSS-Themes/calendars/daterangepicker/fluent2-lite.scss

@@ -115,7 +115,7 @@ $range-icon-bigger-padding: 0 !default;
 $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
-$range-calendar-bigger-max: 296px !default;
+$range-calendar-bigger-max: 320px !default;
 
 $range-header-label-size: $text-base !default;
 $range-bigger-header-label-size: $text-lg !default;
@@ -317,6 +317,10 @@ $range-bigger-small-icon-container-min-width: 34px !default;
 $range-bigger-small-icon-container-min-height: 34px !default;
 $range-bigger-small-icon-border-radius: 20px !default;
 
+.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+  max-width: 350px;
+}
+
 @include export-module('daterangepicker-layout') {
 
   .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,