Prevent TablePaginator page buttons from being overlapped (#2316)

iTwin · Nov 4, 2024 · 1779daf · 1779daf
1 parent 8979faf
commit 1779daf
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/cold-apes-scream.md b/.changeset/cold-apes-scream.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+In `.iui-table-paginator`, the `.iui-center`  gets a higher z-index over `.iui-left` and `.iui-right`.
diff --git a/.changeset/stale-lamps-itch.md b/.changeset/stale-lamps-itch.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+`TablePaginator`'s page buttons no longer get overlapped by neighboring paginator elements.
diff --git a/packages/itwinui-css/src/table/paginator.scss b/packages/itwinui-css/src/table/paginator.scss
@@ -14,6 +14,7 @@
   border-end-start-radius: var(--iui-border-radius-1);
   border-end-end-radius: var(--iui-border-radius-1);
   border-block-start: 1px solid var(--iui-color-border);
+  isolation: isolate;
 
   > .iui-left,
   > .iui-center,
@@ -29,6 +30,7 @@
     justify-content: center;
     flex: 2 1;
     color: var(--iui-color-text);
+    z-index: 1;
   }
 
   > .iui-right {