Skip to content

fix: prevent horizontal page overflow on mobile devices

The scrollable table inside .tableContainer causes the entire page to overflow (horizontally) in Chromium/Blink browsers when viewed on a small device like a phone.

Here's a screenshot: image

This is especially annoying because every time you tap an item within the table, the browser will jump to the right and you have to scroll back manually, when you select the next item it happens again, and so on...

Not 100% sure what's causing this (seems to be an inconsistency in different browsers' table layout algorithms?) but adding contain: layout to the .tableContainer fixes the page-wide overflow, while still keeping the table scrollable.

Merge request reports