From b52816ad4efd1c0fee148cffa55cb97eeea11bb3 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Thu, 4 Feb 2021 11:07:07 -0800
Subject: [PATCH] [DATA GRID] Fix fullscreen scrolling issues (#4477)

* Fix fullscreen scrolling issues

* cl
---
 CHANGELOG.md                               | 1 +
 src/components/datagrid/data_grid.tsx      | 4 ++++
 src/components/datagrid/data_grid_body.tsx | 5 ++++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d10bfba44d3..50b7cbac2e9 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 89261e070e3..0c244b428d7 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/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
                                     }
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 1d1da6da5b5..83a413e2e44 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/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;
   }