fix(tabs): include button widths for comparison

twilio-labs · Nov 8, 2024 · 6e5e954 · 6e5e954
1 parent cfe4d21
commit 6e5e954
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/paste-core/components/code-block/src/utlis.ts b/packages/paste-core/components/code-block/src/utlis.ts
@@ -29,14 +29,14 @@ export const useElementsOutOfBounds = (): {
            * Compares the left side of the tab with the left side of the scrollable container position
            * as the x value will not be 0 due to being offset in the screen.
            */
-          if (x < currentScrollContainerXOffset) {
+          if (Math.round(x) < Math.round(currentScrollContainerXOffset - 28)) {
             leftOutOfBounds = tab;
           }
           /**
-           * Compares the right side to the end of container. Also ensure there are
+           * Compares the right side to the end of container and button width. Also ensure there are
            * no value set as it loops through the array we don't want it to override the first value out of bounds.
            */
-          if (Math.round(right) > Math.round(currentScrollContainerRightPosition + 1) && !rightOutOfBounds) {
+          if (Math.round(right) > Math.round(currentScrollContainerRightPosition + 28) && !rightOutOfBounds) {
             rightOutOfBounds = tab;
           }
         }

diff --git a/packages/paste-core/components/in-page-navigation/src/utils.ts b/packages/paste-core/components/in-page-navigation/src/utils.ts
@@ -29,14 +29,14 @@ export const useElementsOutOfBounds = (): {
            * Compares the left side of the tab with the left side of the scrollable container position
            * as the x value will not be 0 due to being offset in the screen.
            */
-          if (x < currentScrollContainerXOffset) {
+          if (Math.round(x) < Math.round(currentScrollContainerXOffset - 28)) {
             leftOutOfBounds = tab;
           }
           /**
-           * Compares the right side to the end of container. Also ensure there are
+           * Compares the right side to the end of container and button width. Also ensure there are
            * no value set as it loops through the array we don't want it to override the first value out of bounds.
            */
-          if (Math.round(right) > Math.round(currentScrollContainerRightPosition + 1) && !rightOutOfBounds) {
+          if (Math.round(right) > Math.round(currentScrollContainerRightPosition + 28) && !rightOutOfBounds) {
             rightOutOfBounds = tab;
           }
         }

diff --git a/packages/paste-core/components/tabs/src/utils.ts b/packages/paste-core/components/tabs/src/utils.ts
@@ -35,14 +35,14 @@ export const useElementsOutOfBounds = (): {
            * Compares the left side of the tab with the left side of the scrollable container position
            * as the x value will not be 0 due to being offset in the screen.
            */
-          if (x < currentScrollContainerXOffset) {
+          if (Math.round(x) < Math.round(currentScrollContainerXOffset - 28)) {
             leftOutOfBounds = tab;
           }
           /**
-           * Compares the right side to the end of container. Also ensure there are
+           * Compares the right side to the end of container and button width. Also ensure there are
            * no value set as it loops through the array we don't want it to override the first value out of bounds.
            */
-          if (Math.round(right) > Math.round(currentScrollContainerRightPosition + 1) && !rightOutOfBounds) {
+          if (Math.round(right) > Math.round(currentScrollContainerRightPosition + 28) && !rightOutOfBounds) {
             rightOutOfBounds = tab;
           }
         }