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
Mi piace davvero l’idea della dissolvenza, sia su desktop che su mobile. Nel frattempo è cambiato qualcosa che potrebbe renderla più facilmente realizzabile ora?
È una modifica semplice @awesomerobot? Io la sostengo.
Rivedendo, l’effetto dissolvenza probabilmente non è un’opzione valida qui… richiederebbe l’aggiunta di un contenitore con uno sfondo a gradiente, che non funzionerebbe bene su qualsiasi sfondo diverso da un colore solido. In altri punti utilizziamo un suggerimento di dissolvenza simile, ma si tratta generalmente di aree meno propense ad avere un qualche tipo di sfondo personalizzato (registrazione, barra di navigazione dell’amministratore).
Credo che sarebbe meglio forzare la visualizzazione di una barra di scorrimento quando necessaria. Per quanto ne sappia, l’unico svantaggio è che la barra di scorrimento personalizzata non corrisponderà alle barre di scorrimento native del tuo sistema operativo.
Sembra un compromesso migliore rispetto a non avere alcuna indicazione che la tabella si sposti orizzontalmente.
Agh, di nuovo sventato. iOS 13 ha rotto la possibilità di mostrare sempre la barra di scorrimento… quindi quell’idea non funzionerà per tutti i browser come speravo.
Il precedente override CSS per forzare la comparsa delle barre di scorrimento su iOS richiedeva l’uso di -webkit-overflow-scrolling: auto;, ma iOS 13 imposta -webkit-overflow-scrolling: touch; ovunque di default e sembra che abbiano deprecato completamente -webkit-overflow-scrolling in iOS.
Ora in iOS 15, con iOS 16 all’orizzonte, le tabelle ampie in Discourse non sembrano andare meglio su mobile.
A titolo informativo, la seconda tabella in questo post su un bug di espansione della tabella è un esempio di tabella che fallisce su mobile (e su desktop) per mancanza di scorrimento orizzontale.
