Data grid: Take scrollbar into account

src/components/datagrid/data_grid.tsx

@@ -728,6 +728,30 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     }
   }, [resizeRef, gridDimensions]);
 
+  const [virtualizeContainerWidth, setVirtualizeContainerWidth] = useState(0);
+  const virtualizeContainer = resizeRef?.getElementsByClassName(
+    VIRTUALIZED_CONTAINER_CLASS
+  )[0] as HTMLDivElement | null;
+
+  // re-render data grid on size changes
+  useResizeObserver(virtualizeContainer);
+
+  useEffect(() => {
+    if (virtualizeContainer?.clientWidth) {
+      setVirtualizeContainerWidth(virtualizeContainer.clientWidth);
+    }
+  }, [virtualizeContainer?.clientWidth]);
+
+  useEffect(() => {
+    // wait for layout to settle, then measuer virtualize container
+    setTimeout(() => {
+      if (virtualizeContainer?.clientWidth) {
+        const containerWidth = virtualizeContainer.clientWidth;
+        setVirtualizeContainerWidth(containerWidth);
+      }
+    }, 100);
+  }, [pagination?.pageSize, virtualizeContainer]);
+
   const hasRoomForGridControls = IS_JEST_ENVIRONMENT
     ? true
     : gridWidth > minSizeForControls || isFullScreen;
@@ -801,9 +825,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const defaultColumnWidth = useDefaultColumnWidth(
     // use clientWidth of the virtualization container to take scroll bar into account
     // if that's not possible fall back to the size of the wrapper element
-    (resizeRef?.getElementsByClassName(VIRTUALIZED_CONTAINER_CLASS)[0] as
-      | HTMLDivElement
-      | undefined)?.clientWidth || gridDimensions.width,
+    virtualizeContainerWidth || gridDimensions.width,
     leadingControlColumns,
     trailingControlColumns,
     orderedVisibleColumns

src/components/datagrid/data_grid_body.tsx

@@ -291,7 +291,7 @@ const InnerElement: VariableSizeGridProps['innerElementType'] = forwardRef<
 InnerElement.displayName = 'EuiDataGridInnerElement';
 
 const INITIAL_ROW_HEIGHT = 34;
-const SCROLLBAR_HEIGHT = 15;
+const SCROLLBAR_HEIGHT = 16;
 const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
 
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
@@ -524,10 +524,10 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   const [height, setHeight] = useState<number | undefined>(undefined);
   const [width, setWidth] = useState<number | undefined>(undefined);
 
-  // reset height constraint when rowCount changes
+  // reset height constraint when rowCount or fullscreen setting changes
   useEffect(() => {
     setHeight(undefined);
-  }, [rowCount]);
+  }, [rowCount, isFullScreen]);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const wrapperDimensions = useResizeObserver(wrapperRef.current);