fix: fix bottom pagination on small viewports

cypress/component/DataView.cy.tsx

@@ -57,7 +57,7 @@ describe('DataView', () => {
           } 
         />
         <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
-        <DataViewToolbar ouiaId="DataViewFooter" pagination={<Pagination isCompact {...PAGINATION} />} />
+        <DataViewToolbar ouiaId="DataViewFooter" pagination={<Pagination isCompact variant="bottom" {...PAGINATION} />} />
       </DataView>
     );
     cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx

@@ -244,7 +244,8 @@ const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selected
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={repositories.length} 
             {...pagination} 

packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx

@@ -89,7 +89,8 @@ const MyTable: React.FunctionComponent = () => {
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={filteredData.length} 
             {...pagination} 

packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/PaginationExample.tsx

@@ -44,7 +44,7 @@ const MyTable: React.FunctionComponent = () => {
     <DataView>
       <DataViewToolbar ouiaId='DataViewHeader' pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
-      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact variant="bottom" perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
     </DataView>
   );
 };

packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx

@@ -234,7 +234,7 @@ const MyTable: React.FunctionComponent = () => {
       <DataViewToolbar
         ouiaId="TreeFilterExampleFooter"
         pagination={
-          <Pagination isCompact perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />
+          <Pagination isCompact variant="bottom" perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />
         }
       />
     </DataView>

packages/module/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren, useRef } from 'react';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
 
 /** extends ToolbarProps */
 export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProps>, 'ref'> {
@@ -21,7 +22,19 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
   customLabelGroupContent?: React.ReactNode;
 }
 
+const useStyles = createUseStyles({
+  dataViewToolbarPagination: {
+    flexBasis: '100%',
+    width: '100%'
+  },
+  dataViewToolbarPaginationWrapper: {
+    flexBasis: '100%',
+    width: '100%'
+  }
+});
+
 export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+  const classes = useStyles();
   const defaultClearFilters = useRef(
     <ToolbarItem>
       <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -53,8 +66,10 @@ export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId =
           </ToolbarItem>
         )}
         {pagination && (
-          <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
-            {pagination}
+          <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`} className={classes.dataViewToolbarPagination}>
+            <div className={classes.dataViewToolbarPaginationWrapper}>
+              {pagination}
+            </div>
           </ToolbarItem>
         )}
         {children}