From 67df4a3550a3793b88a2be9652fb9545b9798e59 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 1 Apr 2026 16:55:33 +0200
Subject: [PATCH] re-configure breakpoints for pagination container queries

---
 src/components/Pagination/pagination.scss | 52 ++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss
index 054e9e103..6f920c64f 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;
@@ -15,8 +17,8 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;
 
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
-        font-size: 100%;
         text-overflow: clip;
+        font-size: 100%;
     }
 }
 
@@ -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__text {
+            display: inline-block;
+        }
+        .#{$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;
+        }
+    }
+}
+
+@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;
+        }
+    }
+}