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
أعجبني حقًا فكرة التلاشي، سواء على سطح المكتب أو الجوال. هل حدث أي تغيير في غضون ذلك يجعلها ممكنة بسهولة أكبر الآن؟
هل هذا تغيير سهل @awesomerobot؟ أنا أدعمه.
عند إعادة النظر، من المحتمل أن يكون التلاشي خيارًا غير جيد هنا… سيتطلب ذلك إضافة حاوية بخلفية متدرجة، وهو ما لن يعمل بشكل جيد مع أي خلفية غير ذات لون واحد. نستخدم تلميح تلاشي مشابه في بعض الأماكن الأخرى، لكنها عادةً أماكن أقل عرضة لوجود خلفية مخصصة من نوع ما (تسجيل الدخول، شريط تنقل المسؤول).
أعتقد أننا سنكون في وضع أفضل إذا أجبرنا على ظهور شريط التمرير عند الحاجة. إلى حد ما، العيب الوحيد لذلك هو أن شريط التمرير المخصص لن يتطابق مع أشرطة التمرير الأصلية لنظام التشغيل الخاص بك.
يبدو هذا حلاً وسطًا أفضل من عدم وجود أي مؤشر على أن الجدول قابل للتمرير أفقيًا.
آه، خاب أملنا مرة أخرى. كسر iOS 13 القدرة على إظهار شريط التمرير دائمًا… لذا لن تعمل هذه الفكرة مع جميع المتصفحات كما كنت آمل.
كان تجاوز CSS السابق لإجبار ظهور أشرطة التمرير في iOS يتطلب استخدام -webkit-overflow-scrolling: auto;، لكن iOS 13 يضبط -webkit-overflow-scrolling: touch; في كل مكان افتراضيًا، ويبدو أنهم ألغوا دعم -webkit-overflow-scrolling بالكامل في iOS.
الآن في iOS 15 يتجه نحو 16 والجداول العريضة في Discourse لا تبدو أفضل حالًا على الهاتف المحمول.
للعلم، الجدول الثاني في هذه المشاركة حول خطأ في توسيع الجدول هو مثال لجدول يفشل على الهاتف المحمول (وعلى سطح المكتب) بسبب عدم وجود تمرير أفقي.
