diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04fc8d8f1..3f6a8d798 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
## [Unreleased]
+### Fixed
+
+- ``
+ - improve breakpoints to display widgets for page size and page number inside smaller containers
+ - male the breakpoints configurable via SCSS
+
## [25.1.0] - 2026-04-13
### Added
diff --git a/src/components/Pagination/Stories/Pagination.stories.tsx b/src/components/Pagination/Stories/Pagination.stories.tsx
index 03093508e..fa1ea7ec6 100644
--- a/src/components/Pagination/Stories/Pagination.stories.tsx
+++ b/src/components/Pagination/Stories/Pagination.stories.tsx
@@ -10,6 +10,14 @@ export default {
const PaginationExample = (args) => ;
+const ContainerQueriesExample = (args) => (
+ <>
+
+
+
+ >
+);
+
export const Default: StoryFn = PaginationExample.bind({});
Default.args = {
pageSizes: [10, 20, 50, 100],
@@ -28,3 +36,27 @@ ExtendedPagesizeSelection.args = {
{ text: "Large page with 100 items", value: "100" },
],
};
+
+/**
+ * This story demonstrates a minimal pagination and is a check that elements are always hidden.
+ */
+export const MinimalPagination: StoryFn = PaginationExample.bind({});
+MinimalPagination.args = {
+ ...Default.args,
+ hidePageSizeConfiguration: true,
+ hidePageSelect: true,
+ hideInfoText: true,
+ hideNavigationArrows: false,
+ hideBorders: false,
+};
+
+/**
+ * Demonstrates the breakpoints of the container queries.
+ * If the container gets too small, some elements are removed automatically.
+ * First, page selector disappears, then the page size selector.
+ * Info text and navigation arrow are never hidden automatically.
+ */
+export const ContainerQueries: StoryFn = ContainerQueriesExample.bind({});
+ContainerQueries.args = {
+ ...Default.args,
+};
diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss
index 2617dd4ca..f62f6520a 100644
--- a/src/components/Pagination/pagination.scss
+++ b/src/components/Pagination/pagination.scss
@@ -7,6 +7,8 @@ $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
$eccgui-size-pagination-height-medium: $pt-button-height !default;
$eccgui-size-pagination-height-small: $pt-button-height-small !default;
$eccgui-size-pagination-height-large: $pt-button-height-large !default;
+$eccgui-size-pagination-breakpoint-wide: 32rem !default;
+$eccgui-size-pagination-breakpoint-small: 26rem !default;
.#{$prefix}--pagination {
min-block-size: $eccgui-size-pagination-height-medium;
@@ -38,7 +40,7 @@ span.#{$prefix}--pagination__text {
padding-left: 0;
& > *:not(:last-child) {
- display: none;
+ display: none !important;
}
}
}
@@ -56,7 +58,7 @@ span.#{$prefix}--pagination__text {
.#{$eccgui}-pagination--hideinfotext {
.#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
- display: none;
+ display: none !important;
}
& .#{$prefix}--select__item-count .#{$prefix}--select-input {
@@ -66,13 +68,13 @@ span.#{$prefix}--pagination__text {
.#{$eccgui}-pagination--hidepageselect {
.#{$prefix}--pagination__right > *:not(.#{$prefix}--pagination__control-buttons) {
- display: none;
+ display: none !important;
}
}
.#{$eccgui}-pagination--hidenavigation {
.#{$prefix}--pagination__right > .#{$prefix}--pagination__control-buttons {
- display: none;
+ display: none !important;
}
}
@@ -137,3 +139,51 @@ span.#{$prefix}--pagination__text {
line-height: $eccgui-size-pagination-height-large;
}
}
+
+// fix breakpoints for container queries
+// Carbon does not provide the option to configure that breakpoint
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-small}) {
+ .#{$prefix}--pagination.#{$eccgui}-pagination {
+ .#{$prefix}--pagination__control-buttons {
+ display: flex;
+ }
+ .#{$prefix}--pagination__left > * {
+ display: inherit;
+ }
+ }
+}
+
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+ .#{$prefix}--pagination.#{$eccgui}-pagination {
+ .#{$prefix}--pagination__right > * {
+ display: inherit;
+ }
+ }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-small}) {
+ .#{$prefix}--pagination.#{$eccgui}-pagination {
+ .#{$prefix}--pagination__left > * {
+ display: none;
+ }
+ .#{$prefix}--pagination__items-count {
+ margin-left: 0;
+ }
+ }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+ .#{$prefix}--pagination.#{$eccgui}-pagination {
+ .#{$prefix}--pagination__right > * {
+ display: none;
+ }
+
+ .#{$prefix}--pagination__items-count {
+ display: initial;
+ }
+
+ .#{$prefix}--pagination__control-buttons {
+ display: flex;
+ }
+ }
+}