Wide tables are causing page display issues for the about.gitlab.com on mobile
What is/are the relevant URLs or emails?
Any page with a table wider than a mobile device, e.g.:
- https://about.gitlab.com/handbook/engineering/security/vulnerability_management/
- https://about.gitlab.com/handbook/product/product-management/#product-management-career-development-framework
- https://about.gitlab.com/devops-tools/azure_devops/azure-devops-overview/
Briefly describe the bug
Pages with wide tables cause the responsive mobile view to be wider than the header, and thus scroll horizontally
What are the steps to reproduce the bug
- Use a on a narrow mobile device, e.g. iPhone X.
- Go to a page which has a wide table. E.g. one of URLs above
What is the observed behavior? Be specific.
- Zoom out/scroll to the right, see grey area
- Scroll down to table, and see that it is the cause of the too-wide behavior
What is the expected behavior? Be specific.
- Table is sized to device width, and page is not scrollable horizontally.
Please provide any relevant screenshots
For reference - here is what Desktop looks like:
What is your window size, browser, operating system, and versions
Safari 13, iOS 13.1 414px by 896px
Also tested on an Android device
What device are you using
- iPhone 11 pro max
- iPhone X in Chrome developer tools responsive emulator
Edited by Chad Woolley