Pin field in 320px

[Daniel-Sainero]

Goal

poder usar el componente PinField con 6 o 7 dígitos y que en resoluciones de 320px de ancho no aparezca scroll horizontal

Context

Hemos intentado incluir el componente PinField en nuestros proyectos, pero hemos visto que en mobile con 320px y cuando se le pasa un length de 6 o 7, el componente es demasiado ancho y obliga a usar scroll horizontar

Impact

Poder usar el componente PinField tanto en desktop como en mobile (a 320px)

Discussion Questions

¿Sería posible cambiar el tamaño dependiendo del número que se le pasa en el length?

Additional considerations

https://mistica-web.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AFAlgOwGJpgGygAI8YMBzAFwAsBeAHRADYHCMBDAWxnpAgoAcWbAE5o2AWjxsARvh4B5ACooWAegB8dDCAA0IajC4BnBAG0Q8gEwB9AHIwA7iAC6eh2ijUT8UwGZLAAw6AIwBlgAszgC%2BQA

Do you have a visual proposal?

No response

[HectorSancho]

Hi! @Daniel-Sainero to better understand the impact and possible solution, can you attach a design or screenshot of the actual problem? It would help us to put the problem in context.

Also a couple of questions:

How many digits do you need in this particular use case?

And do you have analytics data on how many of your users are using devices with a width of 320 px?

[Daniel-Sainero]

Hola,

Ya hemos puesto un enlace al componente donde se está viendo el problema, lo volvemos a enviar:

https://mistica-web.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AFAlgOwGJpgGygAI8YMBzAFwAsBeAHRADYHCMBDAWxnpAgoAcWbAE5o2AWjxsARvh4B5ACooWAegB8dDCAA0IajC4BnBAG0Q8gEwB9AHIwA7iAC6eh2ijUT8UwGZLAAw6AIwBlgAszgC%2BQA

1.- En nuestro caso, se requieren 6 dígitos, pero el componente acepta hasta 7 y según diseño debemos desarrollar las vista partiendo de 320px

2.- No, no tenemos ningún tipo de analítica de uso de dispositivos a 320px, es un requerimiento de diseño partir desde ese ancho.

Gracias

[HectorSancho]

Hola Daniel! estamos trabajando en optimizar la usabilidad del componente en espacios y pantallas pequeñas. Actualmente no supone un problema grave ya que con swipe y el focus se puede operar (y no deben haber muchos usuarios con ese ancho de pantalla tan pequeño), pero hemos decidido ir adelante ya que también mejorará la accesibilidad del componente en el caso de que escale el tamaño de la fuente.

Te avisaos cuando esté implementado.

Gracias.

[aweell]

Related issue: #2052