From 2ccf61304b8d302f585d9973ab2b78258f19dd93 Mon Sep 17 00:00:00 2001
From: unleashit <unleashit@protonmail.com>
Date: Tue, 30 Jan 2024 22:41:31 -0800
Subject: [PATCH] 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           |  4 +--
 packages/pagination/src/pagination.tsx        | 22 ++++++++++--
 .../src/scss/pagination.module.scss           | 36 ++++++++++++++++++-
 3 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/packages/pagination/src/numbers.tsx b/packages/pagination/src/numbers.tsx
index 47c703a3..02d32961 100644
--- a/packages/pagination/src/numbers.tsx
+++ b/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],
diff --git a/packages/pagination/src/pagination.tsx b/packages/pagination/src/pagination.tsx
index f477cae7..6ed2fd4f 100644
--- a/packages/pagination/src/pagination.tsx
+++ b/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();
diff --git a/packages/pagination/src/scss/pagination.module.scss b/packages/pagination/src/scss/pagination.module.scss
index e48f1df4..814c8ed7 100644
--- a/packages/pagination/src/scss/pagination.module.scss
+++ b/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;
+    }
   }
 }