fix: fix the alignment of next and prev pagination buttons

This commit is contained in:
ahmadshaheer 2025-09-21 20:13:13 +04:30
parent c8f3ab667a
commit 9533fe1c76
2 changed files with 12 additions and 6 deletions

View File

@ -1,11 +1,11 @@
import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Button, Select } from 'antd'; import { Select } from 'antd';
import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination'; import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { popupContainer } from 'utils/selectPopupContainer'; import { popupContainer } from 'utils/selectPopupContainer';
import { defaultSelectStyle } from './config'; import { defaultSelectStyle } from './config';
import { Container } from './styles'; import { Container, StyledButton } from './styles';
function Controls({ function Controls({
offset = 0, offset = 0,
@ -49,7 +49,7 @@ function Controls({
return ( return (
<Container> <Container>
<Button <StyledButton
loading={isLoading} loading={isLoading}
size="small" size="small"
type="link" type="link"
@ -57,8 +57,8 @@ function Controls({
onClick={handleNavigatePrevious} onClick={handleNavigatePrevious}
> >
<LeftOutlined /> Previous <LeftOutlined /> Previous
</Button> </StyledButton>
<Button <StyledButton
loading={isLoading} loading={isLoading}
size="small" size="small"
type="link" type="link"
@ -66,7 +66,7 @@ function Controls({
onClick={handleNavigateNext} onClick={handleNavigateNext}
> >
Next <RightOutlined /> Next <RightOutlined />
</Button> </StyledButton>
{showSizeChanger && ( {showSizeChanger && (
<Select<Pagination['limit']> <Select<Pagination['limit']>

View File

@ -1,3 +1,4 @@
import { Button } from 'antd';
import styled from 'styled-components'; import styled from 'styled-components';
export const Container = styled.div` export const Container = styled.div`
@ -5,3 +6,8 @@ export const Container = styled.div`
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
`; `;
export const StyledButton = styled(Button)`
display: flex;
align-items: center;
`;