Skip to content

fix: pagination mobile layout and responsive story preview#1014

Draft
natalyjazzviolin wants to merge 13 commits intomainfrom
nataly-cursor/fix-issue-1008-df3a
Draft

fix: pagination mobile layout and responsive story preview#1014
natalyjazzviolin wants to merge 13 commits intomainfrom
nataly-cursor/fix-issue-1008-df3a

Conversation

@natalyjazzviolin
Copy link
Copy Markdown
Contributor

@natalyjazzviolin natalyjazzviolin commented Apr 22, 2026

Why?

Pagination switched parts of its layout to column mode on small screens, causing labels and controls (like 19 rows / of 2) to stack vertically instead of preserving desktop structure. There was also a mobile regression where the page number input could stretch wider than intended in some layouts.

How?

  • Disabled responsive column switching for pagination layout containers so row-oriented structure is preserved at small breakpoints.
  • Kept pagination labels inline to prevent text wrapping from creating column-like stacking in compact viewports.
  • Replaced duplicated styled text wrappers with a single reusable NoWrapText component in Pagination.tsx.
  • Updated page input sizing to a clamped adaptive width strategy (width: clamp(44px, calc(<digitCount>ch + 2.5rem), 72px)) with flex: 0 0 auto, so the input remains compact, can grow slightly for larger page counts, and avoids both stretching and collapsing on mobile.
  • Added a patch changeset for @clickhouse/click-ui.
  • Removed responsive pagination preview story and retained the default Playground story only.
  • Removed the dedicated Pagination.responsive.test.tsx per request and kept functional Pagination tests in Pagination.test.tsx.

Tickets?

Contribution checklist?

  • You've done enough research before writing
  • You have reviewed the PR
  • The commit messages are detailed
  • The build command runs locally
  • Assets or static content are linked and stored in the project
  • For documentation, guides or references, you've tested the commands

Security checklist?

  • All user inputs are validated and sanitized
  • No usage of dangerouslySetInnerHTML
  • Sensitive data has been identified and is being protected properly
  • Build output contains no secrets or API keys

Preview?

VM previews captured during verification:

  • /opt/cursor/artifacts/pagination-vm-preview.webm
  • /opt/cursor/artifacts/pagination-vm-preview-fixed.webm
  • /opt/cursor/artifacts/pagination-vm-preview-fixed-nowrap.webm
  • /opt/cursor/artifacts/pagination-vm-preview-all-inline.webm
Open in Web Open in Cursor 

cursoragent and others added 6 commits April 22, 2026 17:37
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 22, 2026

🦋 Changeset detected

Latest commit: 6b2b8c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clickhouse/click-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@CLAassistant
Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@github-actions

This comment was marked as outdated.

@cursor cursor Bot changed the title Fix pagination mobile layout and add responsive story preview fix: pagination mobile layout and responsive story preview Apr 22, 2026
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
@natalyjazzviolin
Copy link
Copy Markdown
Contributor Author

@claude[agent] review this PR

cursoragent and others added 6 commits April 22, 2026 18:48
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
Co-authored-by: Nataly Merezhuk <natalyjazzviolin@users.noreply.github.com>
@workflow-authentication-public
Copy link
Copy Markdown
Contributor

📚 Storybook Preview Deployed

✅ Preview URL: https://click-qte2j0c21-clickhouse.vercel.app

Built from commit: 1ed95e650fc9582d03e69f4ca66b14da1c1ae75d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants