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.
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?