When wide tables exist, in the desktop theme there is a horizontal scroll bar that hints the visitor we can scroll left and right. However in the Mobile theme there is no such scroll bar and the wide table view is really not intuitive, with visitors not being aware that the table is wider than their screen width. Could we add a scroll bar for mobile as well?
Discussion about this matter (however regarding only Desktop theme) occurred bere
What do you think @awesomerobot?
This is a good example of where the auto-hidden scrollbars on mobile/touch browsers aren’t great…
Discourse only officially supports Chrome & Safari on mobile, which means we can style our own scrollbar using CSS like ::-webkit-scrollbar (support). Mobile Firefox users would see no change.
I think what I would prefer to do, which would support all mobile browsers, is to add a fade to the right of the table once it gets wider than the content of the post. Then at least there’s a hint to see more even if there’s no explicit scrollbar.
The problem with that is that currently we overflow: hidden anything within .cooked as a bit of a safety so post content can’t break the page layout… so we can’t style overflowed content when there’s no visible overflow.
We might not need to overflow: hidden post content anymore? I’ll take a closer look and see if it’s sane to remove it, and if not I can add a visible scrollbar for webkit on mobile.
If it works but the scroll bar is hidden, that’s good enough for now – I don’t want to turn this into a ton of work. You have a solution @Mr.X_Mr.X
Yes, it’s low priority… but somewhat related to what I was already considering to fix Letters getting cut off to the leftmost in posts
Me gusta mucho la idea del desvanecimiento, tanto en escritorio como en móviles. ¿Ha cambiado algo en el tiempo transcurrido que lo haga más factible ahora?
¿Es este un cambio sencillo, @awesomerobot? Lo apoyo.
Al revisarlo, probablemente el desvanecimiento no sea una buena opción aquí… implicaría agregar un contenedor con un fondo degradado, lo cual no funcionaría bien en ningún fondo que no sea de un color sólido. Usamos un indicador de desvanecimiento similar en algunos otros lugares, pero generalmente son áreas menos propensas a tener algún tipo de fondo personalizado (registro, navegación de administración).
Creo que sería mejor forzar la aparición de una barra de desplazamiento cuando sea necesaria. Por lo que sé, la única desventaja de esto es que la barra de desplazamiento personalizada no coincidiría con las barras de desplazamiento nativas de tu sistema operativo.
Eso suena como un compromiso mejor que no tener ninguna indicación de que la tabla se desplaza horizontalmente.
¡Uf, frustrado de nuevo! iOS 13 rompió la capacidad de mostrar siempre la barra de desplazamiento… así que esa idea no funcionará en todos los navegadores como esperaba.
La anulación CSS anterior para forzar la aparición de las barras de desplazamiento en iOS requería usar -webkit-overflow-scrolling: auto;, pero iOS 13 establece -webkit-overflow-scrolling: touch; en todas partes de forma predeterminada y parece que han descontinuado -webkit-overflow-scrolling por completo en iOS.
Ahora en iOS 15, dirigiéndonos a iOS 16, las tablas anchas en Discourse no parecen ir mejor en dispositivos móviles.
Para que conste, la segunda tabla en esta publicación sobre un error de tabla expandible es un ejemplo de una tabla que falla en dispositivos móviles (y en escritorio) por falta de desplazamiento horizontal.
