Tengo un menú horizontal con botones, en el móvil puedes arrastrar y mover hacia la izquierda o hacia la derecha para ver todos los elementos. Cuando hace clic en el botón, se convierte en el botón 'activo', agrego algo de estilo. Lo que lograría aquí es que cuando alguien haga clic en un botón, se mueva automáticamente hacia la izquierda o hacia la derecha y se vuelva completamente visible.

como puede ver, el botón en el lado derecho está activo pero está fuera de la ventana gráfica

Estoy buscando ideas sobre cómo podría implementar dicho mecanismo en React/Typescript con emoción

este es un envoltorio/contenedor de botones:

 const StyledDiv = withTheme( styled.div<StyledProps>` display: flex; flex-wrap: nowrap; overflow: auto width: 100%; overflow-x: scroll; overflow-y: hidden; column-gap: 8px; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } ` )

así es como se construye el botón

 return ( <Button data-label={label} isActive={isActive} onClick={() => setActiveCategory(cat)}> { renderIcon(icon) } <Wrapper> {label} <StyledSpan isActive={isActive}>{label}</StyledSpan> </Wrapper> </Button> )

y aquí está el código CSS para el botón

 const Button = withTheme( styled.button<ActiveButtonProps>` padding: 4px 16px 4px 8px; font-family: ${({ theme }) => theme.fontFamily.sora}; border-radius: 4px; font-size: 12px; line-height: 15px; color: ${({ theme }) => theme.horizontalBar.color}; box-shadow: 0px 2px 4px ${({ theme }) => theme.horizontalBar.boxShadow}; outline: none; background-color: ${({ theme }) => theme.horizontalBar.bgColor}; border: 1px solid transparent; height: 52px; display: inline-flex; align-items: center; position: relative; white-space: nowrap; cursor: pointer; transition: all .3s; font-weight: 400; border: ${ props => props.isActive ? `1px solid ${color.primary.powerGreen}` : `1px solid transparent`}; & > img { margin-right: 4px; } ` ) const StyledSpan = withTheme( styled.span<ActiveButtonProps>` font-weight: ${ props => props.isActive ? 700 : 400 }; color: ${ props => props.isActive ? ({ theme }) => theme.horizontalBar.color : ({ theme }) => theme.horizontalBar.colorInactive }; position: absolute; left: 0; ` ) const Wrapper = withTheme( styled.p<StyledProps>` margin: 0; position: relative; color: transparent; ` )