Merge pull request #275 from aali309/GITOPS-10908

horizontally align top and bottom pagination widgets

Author: keithchong

src/gitops/components/shared/DataView/GitOpsDataViewTable.scss

@@ -0,0 +1,8 @@
+// Keep top/bottom pagination aligned horizontally. PatternFly's bottom
+// variant adds spacer--sm inline padding that the top (toolbar) pager does not.
+.gitops-data-view-table {
+  .pf-v6-c-toolbar__item.pf-m-pagination .pf-v6-c-pagination.pf-m-bottom {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+}

src/gitops/components/shared/DataView/GitOpsDataViewTable.tsx

@@ -19,6 +19,8 @@ import {
   paginateItems,
 } from './gitOpsDataViewPagination';
 
+import './GitOpsDataViewTable.scss';
+
 let gitOpsPaginationInstanceCounter = 0;
 
 const useGitOpsPaginationWidgetIdBase = (): string => {
@@ -149,7 +151,7 @@ export const GitOpsDataViewTable: React.FC<GitOpsDataViewTableProps> = ({
   const showPagination = !!pagination && paginationItemCount > 0 && !isError && !isLoading;
 
   return (
-    <DataView activeState={resolvedActiveState}>
+    <DataView activeState={resolvedActiveState} className="gitops-data-view-table">
       {showPagination && pagination && (
         <DataViewToolbar
           pagination={
@@ -171,6 +173,7 @@ export const GitOpsDataViewTable: React.FC<GitOpsDataViewTableProps> = ({
               pagination={pagination}
               variant={PaginationVariant.bottom}
               widgetId={`${paginationWidgetIdBase}-bottom`}
+              isStatic
             />
           }
         />
@@ -184,7 +187,8 @@ const GitOpsPagination: React.FC<{
   pagination: GitOpsDataViewPagination;
   variant: PaginationVariant;
   widgetId: string;
-}> = ({ itemCount, pagination, variant, widgetId }) => {
+  isStatic?: boolean;
+}> = ({ itemCount, pagination, variant, widgetId, isStatic }) => {
   const { t } = useGitOpsTranslation();
 
   return (
@@ -193,6 +197,7 @@ const GitOpsPagination: React.FC<{
       perPageOptions={GITOPS_PER_PAGE_OPTIONS}
       variant={variant}
       widgetId={widgetId}
+      isStatic={isStatic}
       titles={{
         paginationAriaLabel: t('Pagination'),
         toFirstPageAriaLabel: t('Go to first page'),