refactor(toolbar): to use absolute position so the buttons are allays in the view. (#12349)

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: desig9stein

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

@@ -121,6 +121,8 @@
     );
 
     %igx-grid-toolbar {
+        position: absolute;
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -136,7 +138,6 @@
         background: var-get($theme, 'background-color');
         height: auto;
         min-height: map.get($grid-toolbar-height, 'comfortable');
-        position: relative;
         padding-block: 0;
         padding-inline: map.get($grid-toolbar-padding, 'comfortable');
 
@@ -164,15 +165,24 @@
                 }
             }
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'comfortable');
+        }
     }
 
+
     %igx-grid-toolbar--cosy {
         min-height: map.get($grid-toolbar-height, 'cosy');
         padding-inline: map.get($grid-toolbar-padding, 'cosy');
 
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'cosy');
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'cosy');
+        }
     }
 
     %igx-grid-toolbar--compact {
@@ -182,6 +192,10 @@
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'compact');
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'compact');
+        }
     }
 
     %igx-grid-toolbar__title {