Estoy usando Chakra-UI con Reactjs y tengo el componente Tabs configurado para desplazarse horizontalmente cuando no caben en la ventana gráfica. Me pregunto cómo hacer que la pestaña se ajuste lo más a la izquierda posible cuando está en el estado de enfoque para evitar que la pestaña sea parcialmente visible como en el ejemplo a continuación.

Pestaña enfocada oculta:

Posición de pestaña predeterminada:

Estoy intentando x mandatory en el accesorio sx pero esto no tiene efecto en Chakra Tabs, que estoy seguro de que estoy implementando mal.

 <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", }, }} >

Lo que me gustaría que sucediera es que la pestaña seleccionada se mueva a la misma posición que la primera pestaña predeterminada, o simplemente la traiga a la ventana gráfica de la derecha cuando sea la última pestaña. ¿Cómo puedo hacer esto?