Learn Track Table Causes Overflow on Mobile

[andytudhope]

Describe the bug

This is not necessarily a bug, but the table on the Learn Track index page causes horizontal overflow on mobile screens. We need to find a way to fix this. Likely, the solution is not to use a table... But if we can figure out something else that would also be acceptable.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://kernel.community/en/learn
2. On a mobile screen
3. Scroll to the right to see the unintended overflow effect.

Expected behavior

No horizontal over if possible - either by using something other than a table, or by reducing padding and text size...

Screenshots

Smartphone (please complete the following information):

• Device: Huawei
• OS: Android
• Browser: Brave

[csggene3]

Would it be acceptable for me to try and help? In truth, I have little functional experience but would very much like to contribute.

I experienced the same issue on both Brave and Chrome.

• Device: Motorola G5s Plus

• OS: Android 8.1

• Browser: Brave1.29.76

• Browser: Chrome 92.0.4515.159

[andytudhope]

Hi @csggene3 👋 Thanks for the offer. If you want to have a go, I won't stop you and am open to any solution you come up with. Try to keep it simple if possible - even if it means simply not using a table.

[csggene3]

Sincere apologies for my divided attention. Thank you for your kindness and spirit of inclusivity. Simple intent it will be.

[bm777]

Written in which language?