diff --git a/src/gitops/components/shared/DataView/GitOpsDataViewTable.scss b/src/gitops/components/shared/DataView/GitOpsDataViewTable.scss new file mode 100644 index 000000000..034d8c648 --- /dev/null +++ b/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; + } +} diff --git a/src/gitops/components/shared/DataView/GitOpsDataViewTable.tsx b/src/gitops/components/shared/DataView/GitOpsDataViewTable.tsx index 1d8ea6169..b1d092cae 100644 --- a/src/gitops/components/shared/DataView/GitOpsDataViewTable.tsx +++ b/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 = ({ const showPagination = !!pagination && paginationItemCount > 0 && !isError && !isLoading; return ( - + {showPagination && pagination && ( = ({ 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'),