I am using Chakra-UI with and Reactjs and have the Tabs component set to scroll horizontally when they don't fit in the viewport. I am wondering how to get the tab to snap as far left as it can when in focus state to avoid the tab being partially visible as in the example below.

Hidden focused tab:

Default tab position:

I am trying x mandatory in the sx prop but this doesn't have an effect on Chakra Tabs, which I am sure I am implementing wrong.

<TabList
  overflow="scroll"
  sx={{
     "white-space": "nowrap",
     width: "100vw",
     position: "relative",
     "scroll-snap-type": "x mandatory",
     left: "50%",
     right: "50%",
     "margin-left": "-50vw",
     "margin-right": "-50vw",
     "-webkit-overflow-scrolling": "touch",
     "-webkit-padding-start": "1rem",
     "::-webkit-scrollbar": {
        display: "none",
     },
  }}
>

What I'd like to happen is the selected tab move to the same position as the first default tab, or just bring it into the viewport at the right when it is the last tab. How can I do this?