From f0ae0fa47e144a5550d131552921a9d575b48810 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 19 Sep 2024 10:17:36 -0700
Subject: [PATCH] refactor(segment): update scrollActiveButtonIntoView

---
 core/src/components/segment/segment.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 4c425e18b2e..e66545df026 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -340,6 +340,7 @@ export class Segment implements ComponentInterface {
          * scroll container.
          */
         const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
+        console.log(centeredX);
 
         /**
          * We intentionally use scrollBy here instead of scrollIntoView
@@ -354,10 +355,24 @@ export class Segment implements ComponentInterface {
          * within the scroll container, the browser will attempt
          * to center by as much as it can.
          */
-        el.scrollBy({
-          top: 0,
-          left: centeredX,
+        // el.scrollBy({
+        //   top: 0,
+        //   left: centeredX,
+        //   behavior: smoothScroll ? 'smooth' : 'instant',
+        // });
+
+        activeButton.scrollIntoView({
           behavior: smoothScroll ? 'smooth' : 'instant',
+          inline: 'center',
+
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
         });
       }
     }