@syncfusion/blazor-themes 21.2.3 → 21.2.4

package/SCSS-Themes/fluent-dark.scss

@@ -72814,10 +72814,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 !default;
 $grid-bigger-group-headercell-margin: 6px 0 6px 8px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -72827,8 +72829,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 8px 4px 14px 12px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -4px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 30px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-lg !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -73039,6 +73043,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: -20px -18px -5px -22px !default;
 $grid-bigger-rtl-group-span-padding: 11.5px 4px 14px 4px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 4px 12px 4px 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-bigger-headercell-top-padding: 0 !default;
@@ -73545,6 +73550,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -73601,6 +73610,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -73681,6 +73691,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -73699,6 +73716,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -76833,6 +76854,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {
@@ -98845,7 +98870,7 @@ $olap-bigger-tree-outer-div-height: 500px;
 $field-list-text-transform: none !default;
 $olap-bigger-tree-width: 283px !default;
 $olap-bigger-tree-outer-div-width: 325px !default;
-$field-list-adaptive-outerdiv-height: 184px !default;
+$field-list-adaptive-outerdiv-height: 125px !default;
 
 @include export-module('field-list-layout') {
 
@@ -100646,7 +100671,6 @@ $field-list-adaptive-outerdiv-height: 184px !default;
   .e-bigger .e-pivotfieldlist-container,
   .e-bigger.e-pivotfieldlist-container {
 
-    .e-adaptive-field-list-dialog .e-dlg-content .e-member-editor-outer-container .e-member-editor-container-outer-div,
     .e-member-editor-dialog .e-dlg-content .e-member-editor-outer-container .e-member-editor-container-outer-div {
       height: $field-list-member-filter-list-bigger-height;
     }

package/SCSS-Themes/fluent.scss

@@ -72815,10 +72815,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 !default;
 $grid-bigger-group-headercell-margin: 6px 0 6px 8px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -72828,8 +72830,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 8px 4px 14px 12px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -4px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 30px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-lg !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -73040,6 +73044,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: -20px -18px -5px -22px !default;
 $grid-bigger-rtl-group-span-padding: 11.5px 4px 14px 4px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 4px 12px 4px 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-bigger-headercell-top-padding: 0 !default;
@@ -73546,6 +73551,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -73602,6 +73611,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -73682,6 +73692,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -73700,6 +73717,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -76834,6 +76855,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {
@@ -98846,7 +98871,7 @@ $olap-bigger-tree-outer-div-height: 500px;
 $field-list-text-transform: none !default;
 $olap-bigger-tree-width: 283px !default;
 $olap-bigger-tree-outer-div-width: 325px !default;
-$field-list-adaptive-outerdiv-height: 184px !default;
+$field-list-adaptive-outerdiv-height: 125px !default;
 
 @include export-module('field-list-layout') {
 
@@ -100647,7 +100672,6 @@ $field-list-adaptive-outerdiv-height: 184px !default;
   .e-bigger .e-pivotfieldlist-container,
   .e-bigger.e-pivotfieldlist-container {
 
-    .e-adaptive-field-list-dialog .e-dlg-content .e-member-editor-outer-container .e-member-editor-container-outer-div,
     .e-member-editor-dialog .e-dlg-content .e-member-editor-outer-container .e-member-editor-container-outer-div {
       height: $field-list-member-filter-list-bigger-height;
     }

package/SCSS-Themes/grids/grid/bootstrap-dark.scss

@@ -358,10 +358,12 @@ $grid-bigger-headercell-font-size: 15px !default;
 $grid-bigger-content-font-size: 14px !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: -1px !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 5px 0 8px !default;
 $grid-bigger-group-headercell-margin: 4px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 9px 0 !default;
+$grid-device-group-headercell-padding: 9px 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 8px !default;
 $grid-bigger-icons-font-size: 14px !default;
@@ -371,8 +373,10 @@ $grid-bigger-grouped-headercell-border-radius: 6px !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 14px !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -7px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -3px !default;
+$grid-device-ungroupbutton-icon-margin-top: -3px !default;
 $grid-bigger-groupcell-span-line-height: 37px !default;
 $grid-bigger-gdownarrow-icon-font-size: 14px !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -614,6 +618,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1121,6 +1126,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1177,6 +1186,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1257,6 +1267,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1275,6 +1292,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4409,6 +4430,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

package/SCSS-Themes/grids/grid/bootstrap.scss

@@ -362,10 +362,12 @@ $grid-bigger-headercell-font-size: 15px !default;
 $grid-bigger-content-font-size: 14px !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: -1px !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 5px 0 8px !default;
 $grid-bigger-group-headercell-margin: 6px 0 0 12px !default;
 $grid-bigger-group-headercell-padding: 9px 0 !default;
+$grid-device-group-headercell-padding: 9px 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 8px !default;
 $grid-bigger-icons-font-size: 14px !default;
@@ -375,8 +377,10 @@ $grid-bigger-grouped-headercell-border-radius: 6px !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 14px !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -7px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -3px !default;
+$grid-device-ungroupbutton-icon-margin-top: -3px !default;
 $grid-bigger-groupcell-span-line-height: 37px !default;
 $grid-bigger-gdownarrow-icon-font-size: 14px !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -616,6 +620,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1123,6 +1128,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1179,6 +1188,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1259,6 +1269,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1277,6 +1294,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4411,6 +4432,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

package/SCSS-Themes/grids/grid/bootstrap4.scss

@@ -363,10 +363,12 @@ $grid-bigger-headercell-font-size: 16px !default;
 $grid-bigger-content-font-size: 16px !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -1px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 2px 8px 8px !default;
 $grid-bigger-group-headercell-margin: 15px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: 16px !default;
@@ -376,9 +378,11 @@ $grid-bigger-grouped-headercell-border-radius: 6px !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 12px !default;
 $grid-bigger-groupcell-span-padding: 8px 4px 10px 12px !default;
+$grid-device-grouped-headercell-span-padding: 0 4px 0 12px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -7px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -1px !default;
-$grid-bigger-groupcell-span-line-height: 4px !default;
+$grid-device-ungroupbutton-icon-margin-top: -1px !default;
+$grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: 12px !default;
 $grid-gd-clone-border-radius: 4px !default;
 $grid-bigger-group-clone-broder-radius: 6px !default;
@@ -620,6 +624,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 0 !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: 8px 4px 10px 8px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 12px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1127,6 +1132,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1183,6 +1192,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1263,6 +1273,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1281,6 +1298,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4415,6 +4436,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

package/SCSS-Themes/grids/grid/bootstrap5-dark.scss

@@ -358,10 +358,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: 1px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 0 8px !default;
 $grid-bigger-group-headercell-margin: 8px 0 0 8px !default;
 $grid-bigger-group-headercell-padding: 7px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -371,8 +373,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -12px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-base !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -614,6 +618,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 4px !default;
 $grid-bigger-rtl-cm-margin: -12px 4px -12px -22px !default;
 $grid-bigger-rtl-group-span-padding: 0 8px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;
@@ -1121,6 +1126,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1177,6 +1186,7 @@ $grid-dropitems-count-margin-left: -4px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1257,6 +1267,13 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1275,6 +1292,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4409,6 +4430,10 @@ $grid-dropitems-count-margin-left: -4px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

package/SCSS-Themes/grids/grid/bootstrap5.scss

@@ -358,10 +358,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: 1px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 0 8px !default;
 $grid-bigger-group-headercell-margin: 8px 0 0 8px !default;
 $grid-bigger-group-headercell-padding: 7px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -371,8 +373,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -12px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-base !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -614,6 +618,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 4px !default;
 $grid-bigger-rtl-cm-margin: -12px 4px -12px -22px !default;
 $grid-bigger-rtl-group-span-padding: 0 8px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;
@@ -1121,6 +1126,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1177,6 +1186,7 @@ $grid-dropitems-count-margin-left: -4px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1257,6 +1267,13 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1275,6 +1292,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4409,6 +4430,10 @@ $grid-dropitems-count-margin-left: -4px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {