@syncfusion/blazor-themes 21.2.3 → 21.2.5

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;
@@ -2578,6 +2599,8 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3912,6 +3935,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4409,6 +4433,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 {
@@ -4625,9 +4653,17 @@ $grid-dropitems-count-margin-left: -8px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;

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;
@@ -2580,6 +2601,8 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3914,6 +3937,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4411,6 +4435,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 {
@@ -4627,9 +4655,17 @@ $grid-dropitems-count-margin-left: -8px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;

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;
@@ -2584,6 +2605,8 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3918,6 +3941,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4415,6 +4439,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 {
@@ -4631,9 +4659,17 @@ $grid-dropitems-count-margin-left: -8px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;

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;
@@ -2578,6 +2599,8 @@ $grid-dropitems-count-margin-left: -4px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3912,6 +3935,7 @@ $grid-dropitems-count-margin-left: -4px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4409,6 +4433,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 {
@@ -4625,9 +4653,17 @@ $grid-dropitems-count-margin-left: -4px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;

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;
@@ -2578,6 +2599,8 @@ $grid-dropitems-count-margin-left: -4px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3912,6 +3935,7 @@ $grid-dropitems-count-margin-left: -4px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4409,6 +4433,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 {
@@ -4625,9 +4653,17 @@ $grid-dropitems-count-margin-left: -4px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;