Merge pull request #12532 from IgniteUI/mpopov/grid-toolbar-problems-M

fix(grid-toolbar): toolbar doesn't fit content

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -92,17 +92,6 @@
     ));
 }
 
-@mixin _offset-sibling-elements($offset) {
-    + igx-grid-header-row,
-    + igx-grid-group-by-area {
-        margin-top: $offset;
-    }
-
-    + igx-grid-group-by-area {
-        height: auto;
-    }
-}
-
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
     @include css-vars($theme);
@@ -132,10 +121,6 @@
     );
 
     %igx-grid-toolbar {
-        $height: map.get($grid-toolbar-height, 'comfortable');
-        @include _offset-sibling-elements($height);
-
-        position: absolute;
         width: 100%;
         display: flex;
         align-items: center;
@@ -151,7 +136,7 @@
 
         background: var-get($theme, 'background-color');
         height: auto;
-        min-height: $height;
+        min-height: map.get($grid-toolbar-height, 'comfortable');
         padding-block: 0;
         padding-inline: map.get($grid-toolbar-padding, 'comfortable');
 
@@ -182,10 +167,7 @@
     }
 
     %igx-grid-toolbar--cosy {
-        $height: map.get($grid-toolbar-height, 'cosy');
-        @include _offset-sibling-elements($height);
-
-        min-height: $height;
+        min-height: map.get($grid-toolbar-height, 'cosy');
         padding-inline: map.get($grid-toolbar-padding, 'cosy');
 
         [igxButton] {
@@ -194,10 +176,7 @@
     }
 
     %igx-grid-toolbar--compact {
-        $height: map.get($grid-toolbar-height, 'compact');
-        @include _offset-sibling-elements($height);
-
-        min-height: $height;
+        min-height: map.get($grid-toolbar-height, 'compact');
         padding-inline: map.get($grid-toolbar-padding, 'compact');
 
         [igxButton] {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -696,7 +696,7 @@
         position: relative;
         display: grid;
         grid-template-rows: auto auto auto 1fr auto auto;
-        grid-template-columns: 1fr;
+        grid-template-columns: 100%;
         overflow: hidden;
         box-shadow: $grid-shadow;