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
I really like the idea of the fade, both on desktop and mobile. Has anything changed in the meantime that would make it more easily possible now?
Is this an easy change @awesomerobot? I support it.
On revisit the fade probably isn’t a good option here… it would involve adding a container that has a gradient background, which wouldn’t work well on any background that isn’t a solid color. We use a similar fade hint in some other places, but they’re generally places that are less likely to have some sort of custom background (sign-up, admin nav).
I think we’d be better off forcing a scrollbar to appear when it’s needed. As far as I know the only downside of that is the custom scrollbar wouldn’t match your native OS scrollbars.
That sounds like a better compromise than no indication that the table scrolls horizontally.
Agh, foiled again. iOS13 broke the ability to always show the scrollbar… so that idea won’t work for all browsers as I hoped.
The previous CSS override to force iOS scrollbars to appear required using -webkit-overflow-scrolling: auto; but iOS13 sets -webkit-overflow-scrolling: touch; everywhere by default and they seemed to have deprecated -webkit-overflow-scrolling entirely in iOS.
现在在 iOS 15（即将推出 iOS 16）上，Discourse 中的宽表格在移动设备上似乎也没有好到哪里去。
供参考，这篇关于展开表格错误的帖子中的第二个表格就是一个在移动设备（以及桌面设备）上因缺少水平滚动而失败的表格示例。
