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
Eu realmente gosto da ideia do fade, tanto no desktop quanto no mobile. Houve alguma mudança desde então que tornaria isso mais fácil de realizar agora?
É uma mudança simples, @awesomerobot? Eu apoio.
Ao reavaliar, o efeito de fade provavelmente não é uma boa opção aqui… envolveria adicionar um contêiner com um fundo em gradiente, o que não funcionaria bem em qualquer fundo que não seja de cor sólida. Usamos uma dica de fade semelhante em alguns outros lugares, mas geralmente são áreas menos propensas a ter algum tipo de fundo personalizado (cadastro, navegação de administrador).
Acho que seria melhor forçar a aparición de uma barra de rolagem quando ela for necessária. Até onde sei, a única desvantagem disso é que a barra de rolagem personalizada não corresponderia às barras de rolagem nativas do seu sistema operacional.
Isso parece um compromisso melhor do que não haver nenhuma indicação de que a tabela tem rolagem horizontal.
Agh, frustrado novamente. O iOS 13 quebrou a capacidade de sempre mostrar a barra de rolagem… então essa ideia não funcionará para todos os navegadores como eu esperava.
A substituição anterior de CSS para forçar a exibição das barras de rolagem no iOS exigia o uso de -webkit-overflow-scrolling: auto;, mas o iOS 13 define -webkit-overflow-scrolling: touch; em todos os lugares por padrão, e eles parecem ter descontinuado -webkit-overflow-scrolling completamente no iOS.
Agora no iOS 15 rumando para o 16 e tabelas largas no Discourse não parecem estar indo melhor no celular.
Para constar, a segunda tabela em esta postagem sobre um bug de expansão de tabela é um exemplo de tabela que falha no celular (e no desktop) por falta de rolagem horizontal.
