fix(pagination): consider padding in container query and css

- after adding padding in dark mode, responsive was broken
- use total width - padding as the container width to determine number
of pages to display
- css tweaks to make everything look nicer at various widths and paddings

packages/pagination/src/numbers.tsx

@@ -25,8 +25,8 @@ const Numbers = ({
   let maxPages;
   if (containerWidth <= 1000) {
     const [_, breakPointPages]: any = [
-      [450, 2],
-      [550, 3],
+      [340, 2],
+      [380, 3],
       [650, 4],
       [850, 8],
       [1000, 10],

packages/pagination/src/pagination.tsx

@@ -53,8 +53,26 @@ const Pagination = ({
 
   useEffect(() => {
     const setWidth = throttle(() => {
-      const width = containerRef.current ? containerRef.current.offsetWidth : 0;
-      setContainerWidth(width);
+      let effectiveWidth = 0;
+      if (containerRef.current) {
+        const container = window.getComputedStyle(containerRef.current);
+        const totalWidth = Number(
+          container.getPropertyValue('width').replace(/px$/, ''),
+        );
+
+        // subtract padding plus a buffer to account for smaller overall space
+        // when padding is introduced
+        const leftPad =
+          Number(
+            container.getPropertyValue('padding-left').replace(/px$/, ''),
+          ) * 2;
+        const rightPad =
+          Number(
+            container.getPropertyValue('padding-right').replace(/px$/, ''),
+          ) * 2;
+        effectiveWidth = totalWidth - leftPad - rightPad;
+      }
+      setContainerWidth(effectiveWidth);
     }, 500);
 
     setWidth();

packages/pagination/src/scss/pagination.module.scss

@@ -154,7 +154,41 @@ $darkmode-page-active: $ltgray;
 }
 
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: $break-xs) {
   .number {
+    width: 2.1rem;
+    height: 2.1rem;
+    line-height: 2.1rem;
+    font-size: 0.8rem;
+  }
+  .number {
+    margin-right: 0.4rem;
+  }
+  .ellipsis {
+    margin-right: 0.2rem;
+  }
+  .prev, .chevronLeft {
+    margin-right: 0.3rem;
+  }
+  .chevronRight {
+    margin-left: 0.3rem;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .ellipsis {
+    display: none;
+  }
+}
+
+/*
+  hack assumes default padding is set in dark mode theme
+  consider container query if browser support is good enough
+*/
+@media screen and (max-width: 400px) {
+  [data-theme='dark'] {
+    .ellipsis {
+      display: none;
+    }
   }
 }