fix(header): Change grid header css to flexbox

* Change grid header css to flexbox

Change grid header css to be flexbox based

Header display properties was previously table based while body is block based. This causes alignment issues in some cases.

* Better spacing

* Another space

Fix #6799, Fix #2592

src/less/header.less

@@ -33,7 +33,8 @@
   // Clearfix for floating header cells
   &:before, &:after {
     content: "";
-    display: table;
+    display: -ms-flexbox;
+    display: flex;
     line-height: 0;
   }
 
@@ -44,15 +45,23 @@
   // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
 }
 
+
 .ui-grid-header-cell-wrapper {
   position: relative;
-  display: table;
+  display: -ms-flexbox;
+  display: flex;
   box-sizing: border-box;
   height: 100%;
+  width: 100%;
 }
 
 .ui-grid-header-cell-row {
-  display: table-row;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .ui-grid-header-cell {
@@ -61,7 +70,6 @@
   background-color: inherit;
   border-right: @gridBorderWidth solid;
   border-color: @headerVerticalBarColor;
-  display: table-cell;
 
   &:last-child {
     border-right: 0;
@@ -84,6 +92,11 @@
     margin-left: -8px;
   }
 }
+/* Fixes IE word-wrap if needed on header cells */
+.ui-grid-header-cell > div {
+  -ms-flex-basis: 100%;
+  flex-basis: 100%;
+}
 
 // Make vertical bar in header row fill the height of the cell completely
 .ui-grid-header .ui-grid-vertical-bar {