What happened?
The Pagination component's outer Container uses isResponsive={true} by default, which causes it to switch from flex-direction: row to flex-direction: column at ≤768px. This breaks the layout because:
- The
justify-content: space-between that spaces "X rows" and the page navigation apart on the horizontal axis stops working, it now applies vertically.
- Items center horizontally instead of spreading apart, and the page input stretches.
- The inner nav controls (prev/next buttons, page input) are already designed to stay compact (
fillWidth={false}, maxWidth="50px" on the input), so the column stacking doesn't improve usability.
Expected behavior: The pagination row should maintain its horizontal layout at all screen widths, with "X rows" on the left and page navigation on the right.
Suggested fix: Pass isResponsive={false} to the outer Container in Pagination.tsx so it always stays as a row.
Component(s) affected
Pagination
How to reproduce
- Use a pagination component
- Minimize the screen so the smallest media query activates
Click UI Version
current
Browser(s)
Chrome
Operating system
macOS
Is this a regression?
No, never worked as far as I know
Last working version (if regression)
No response
Screenshots or recording
Visual / UX checklist
What happened?
The Pagination component's outer Container uses
isResponsive={true}by default, which causes it to switch fromflex-direction: rowtoflex-direction: columnat ≤768px. This breaks the layout because:justify-content: space-betweenthat spaces "X rows" and the page navigation apart on the horizontal axis stops working, it now applies vertically.fillWidth={false},maxWidth="50px"on the input), so the column stacking doesn't improve usability.Expected behavior: The pagination row should maintain its horizontal layout at all screen widths, with "X rows" on the left and page navigation on the right.
Suggested fix: Pass
isResponsive={false}to the outerContainerinPagination.tsxso it always stays as a row.Component(s) affected
Pagination
How to reproduce
Click UI Version
current
Browser(s)
Chrome
Operating system
macOS
Is this a regression?
No, never worked as far as I know
Last working version (if regression)
No response
Screenshots or recording
Visual / UX checklist