@syncfusion/blazor-themes 21.2.3 → 21.2.5

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

@@ -133,7 +133,9 @@ $grid-bigger-columnchooser-header-padding: 24px 24px 38px !default;
 $grid-bigger-columnchooser-ul-padding: 0 !default;
 $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-padding: 0 !default;
+$grid-device-grouped-headercell-span-padding: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-device-gridheader-row-span-padding: 20px !default;
 $frozen-border: 2px solid !default;
@@ -336,9 +338,11 @@ $grid-bigger-groupcaption-line-height: 27px !default;
 $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-group-headercell-margin: 9px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 0 10px !default;
+$grid-device-group-headercell-padding: 0 10px !default;
 $grid-bigger-ungroup-button-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 1px !default;
 $grid-bigger-grouparea-font-size: 21px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 10px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 0 10px !default;
@@ -611,6 +615,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 3px !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: 0 !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1118,6 +1123,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;
     }
@@ -1174,6 +1183,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,
@@ -1254,6 +1264,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;
@@ -1272,6 +1289,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;
@@ -2575,6 +2596,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,
@@ -3909,6 +3932,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 {
@@ -4406,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 {
@@ -4622,9 +4650,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/fabric.scss

@@ -137,7 +137,9 @@ $grid-bigger-columnchooser-header-padding: 24px 24px 38px !default;
 $grid-bigger-columnchooser-ul-padding: 0 !default;
 $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-padding: 0 !default;
+$grid-device-grouped-headercell-span-padding: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-device-gridheader-row-span-padding: 20px !default;
 $frozen-border: 2px solid !default;
@@ -339,9 +341,11 @@ $grid-bigger-groupcaption-line-height: 27px !default;
 $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-group-headercell-margin: 9px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 0 10px !default;
+$grid-device-group-headercell-padding: 0 10px !default;
 $grid-bigger-ungroup-button-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 0 !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-grouparea-font-size: 21px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 10px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 0 10px !default;
@@ -611,6 +615,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 3px !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: 0 !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1118,6 +1123,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;
     }
@@ -1174,6 +1183,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,
@@ -1254,6 +1264,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;
@@ -1272,6 +1289,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;
@@ -2575,6 +2596,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,
@@ -3909,6 +3932,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 {
@@ -4406,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 {
@@ -4622,9 +4650,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/fluent-dark.scss

@@ -382,10 +382,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;
@@ -395,8 +397,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;
@@ -607,6 +611,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;
@@ -1113,6 +1118,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;
     }
@@ -1169,6 +1178,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,
@@ -1249,6 +1259,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;
@@ -1267,6 +1284,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;
@@ -2570,6 +2591,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,
@@ -3904,6 +3927,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 {
@@ -4401,6 +4425,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 {
@@ -4617,9 +4645,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/fluent.scss

@@ -382,10 +382,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;
@@ -395,8 +397,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;
@@ -607,6 +611,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;
@@ -1113,6 +1118,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;
     }
@@ -1169,6 +1178,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,
@@ -1249,6 +1259,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;
@@ -1267,6 +1284,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;
@@ -2570,6 +2591,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,
@@ -3904,6 +3927,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 {
@@ -4401,6 +4425,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 {
@@ -4617,9 +4645,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/highcontrast.scss

@@ -137,7 +137,9 @@ $grid-bigger-columnchooser-header-padding: 24px 24px 38px !default;
 $grid-bigger-columnchooser-ul-padding: 0 !default;
 $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-padding: 0 !default;
+$grid-device-grouped-headercell-span-padding: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-device-headercell-padding: 0 12px $grid-header-bottom-padding !default;
 $grid-device-headercell-fistchild-padding: 0 12px $grid-header-bottom-padding 16px !default;
@@ -330,9 +332,11 @@ $grid-bigger-groupcaption-line-height: 27px !default;
 $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-group-headercell-margin: 10px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 1px 10px !default;
+$grid-device-group-headercell-padding: 1px 10px !default;
 $grid-bigger-ungroup-button-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 1px !default;
 $grid-bigger-grouparea-font-size: 21px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 10px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 0 10px !default;
@@ -611,6 +615,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 5px !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: 0 !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1118,6 +1123,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;
     }
@@ -1174,6 +1183,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,
@@ -1254,6 +1264,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;
@@ -1272,6 +1289,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;
@@ -2575,6 +2596,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,
@@ -3909,6 +3932,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 {
@@ -4406,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 {
@@ -4622,9 +4650,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%;