Skip to content

fix: pagination mobile layout and responsive story preview #1014

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
natalyjazzviolin wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

fix: pagination mobile layout and responsive story preview #1014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cbe0316
Fix pagination layout on small screens
cursoragent Apr 22, 2026
b273490
Keep pagination controls horizontal on small screens
cursoragent Apr 22, 2026
aad4c87
Tune pagination preview story for desktop-like layout
cursoragent Apr 22, 2026
a5d4847
Prevent total pages label from wrapping in pagination
cursoragent Apr 22, 2026
f2a3194
Keep pagination labels on one line on mobile
cursoragent Apr 22, 2026
d056ad0
Add responsive pagination story and remove responsive test
cursoragent Apr 22, 2026
ded8cc1
Address pagination PR feedback and add changeset
cursoragent Apr 22, 2026
40d1c92
Add table-integrated pagination responsive story
cursoragent Apr 22, 2026
dbceeca
Remove responsive pagination preview story
cursoragent Apr 22, 2026
2ab7d3f
Lock pagination page input width on small screens
cursoragent Apr 22, 2026
3ecc295
Prevent pagination page input from shrinking
cursoragent Apr 22, 2026
277de25
Make pagination page input width content-aware
cursoragent Apr 22, 2026
6b2b8c8
Use clamped adaptive width for pagination page input
cursoragent Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-pagination-mobile-layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@clickhouse/click-ui": patch
---

Fix Pagination layout on small screens so it preserves the desktop horizontal structure without stacking labels or controls into columns.
34 changes: 25 additions & 9 deletions src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,18 @@ const CustomSelect = styled.div`
width: 150px;
`;

const NoWrapText = styled(Text)`
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
flex-shrink: 0;
`;

const PageInputWrapper = styled.div<{ $digitCount: number }>`
flex: 0 0 auto;
width: ${({ $digitCount }) => `clamp(44px, calc(${$digitCount}ch + 2.5rem), 72px)`};
`;

export const Pagination = ({
totalPages,
currentPage,
Expand All @@ -68,6 +80,11 @@ export const Pagination = ({
}: PaginationProps): ReactElement => {
const hasRowCount = ['number', 'string'].includes(typeof rowCount);
const inputRef = useRef<HTMLInputElement>(null);
const pageDigits = Math.max(
2,
currentPage.toString().length,
(totalPages ?? 0).toString().length
);
const formatNumber = (value: number) => {
return new Intl.NumberFormat('en').format(value);
};
Expand Down Expand Up @@ -130,6 +147,7 @@ export const Pagination = ({
return (
<Container
gap={gap}
isResponsive={false}
justifyContent={
justifyContent ??
(rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')
Expand All @@ -138,16 +156,17 @@ export const Pagination = ({
{...props}
>
{hasRowCount && (
<Text
<NoWrapText
component="div"
color="muted"
size="sm"
>
{typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows
</Text>
</NoWrapText>
)}
<Container
gap="xxs"
isResponsive={false}
fillWidth={false}
>
<IconButton
Expand All @@ -157,10 +176,7 @@ export const Pagination = ({
onClick={onPrevClick}
data-testid="prev-btn"
/>
<Container
maxWidth="50px"
fillWidth={false}
>
<PageInputWrapper $digitCount={pageDigits}>
<NumberField
ref={inputRef}
onChange={onChange}
Expand All @@ -174,15 +190,15 @@ export const Pagination = ({
onBlur={onPageNumberBlur}
disabled={leftButtonDisabled && rightButtonDisabled}
/>
</Container>
</PageInputWrapper>
{!!totalPages && (
<Text
<NoWrapText
component="div"
color="muted"
size="sm"
>
of {formatNumber(totalPages)}
</Text>
</NoWrapText>
)}
<IconButton
icon="chevron-right"
Expand Down
Loading