[DATA GRID] Fix fullscreen scrolling issues

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 - Fixed `id` usage throughout `EuiTreeView` to respect custom ids and stop conflicts in generated ids ([#4435](https://github.com/elastic/eui/pull/4435))
 - Fixed `EuiTabs` `role` if no tabs are passed in ([#4435](https://github.com/elastic/eui/pull/4435))
+- Fixed issue in `EuiDataGrid` where the horizontal scrollbar was hidden behind pagination ([#4477](https://github.com/elastic/eui/pull/4477))
 - Fixed `EuiPopover` with initial `isOpen` working with `EuiOutsideClickDetector` ([#4461](https://github.com/elastic/eui/pull/4461))
 - Fixed `EuiDataGridCellPopover` needing 2 state updates to close ([#4461](https://github.com/elastic/eui/pull/4461))
 - Fixed `EuiBadge` with `iconOnClick` from catching form submit events ([#4479](https://github.com/elastic/eui/pull/4479))

src/components/datagrid/data_grid.tsx

@@ -718,7 +718,9 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   // enables/disables grid controls based on available width
   const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
+  const [toolbarRef, setToolbarRef] = useState<HTMLDivElement | null>(null);
   const gridDimensions = useResizeObserver(resizeRef, 'width');
+  const toolbarDemensions = useResizeObserver(toolbarRef, 'height');
   useEffect(() => {
     if (resizeRef) {
       const { width } = gridDimensions;
@@ -996,6 +998,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                           <>
                             {showToolbar ? (
                               <div
+                                ref={setToolbarRef}
                                 className="euiDataGrid__controls"
                                 data-test-sub="dataGridControls">
                                 {hasRoomForGridControls ? gridControls : null}
@@ -1047,6 +1050,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                     columns={orderedVisibleColumns}
                                     columnWidths={columnWidths}
                                     defaultColumnWidth={defaultColumnWidth}
+                                    toolbarHeight={toolbarDemensions.height}
                                     leadingControlColumns={
                                       leadingControlColumns
                                     }

src/components/datagrid/data_grid_body.tsx

@@ -88,6 +88,7 @@ export interface EuiDataGridBodyProps {
   handleHeaderMutation: MutationCallback;
   setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
   switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
+  toolbarHeight: number;
 }
 
 const defaultComparator: NonNullable<
@@ -317,6 +318,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     handleHeaderMutation,
     setVisibleColumns,
     switchColumnPos,
+    toolbarHeight,
   } = props;
 
   const [headerRowRef, setHeaderRowRef] = useState<HTMLDivElement | null>(null);
@@ -560,7 +562,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   let finalHeight = IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight;
   let finalWidth = IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth;
   if (isFullScreen) {
-    finalHeight = window.innerHeight;
+    finalHeight =
+      window.innerHeight - toolbarHeight - headerRowHeight - footerRowHeight;
     finalWidth = window.innerWidth;
   }