Wide table can push table wider than viewport

This path, admin/structure/block is on the list to review at #1876196: Handling admin pages with tables

Webkit's select element only squishes in width as narrow as its widest option element within. We see gecko (FF) or trident (IE) squishing (technical term) the select element narrower.

Genuine iPhone screenshot:

Marked #2061873: Toolbar and Page pushed over at admin/content on iPhone as duplicate.

This is also true anywhere visible table cells are wide enough to push out to the right. This happens when the table is too wide for any reason, as it is at admin/content and admin/people/permissions. On the phone what happens is rather than a scrollbar, the table scales down so we get small text, along with the part above the table having the space on the right where it's getting pushed over by the table's overflow.

It seems like wherever this shows up, a solution might be to further implement the priority table cell technique, hiding another cell at that point.

It's really too bad about the webkit select element, where there is really nothing we can do besides -webkit-appearance: none; and style a custom select, needing the dropdown arrow - not an option IMO, so webkit would cause us to loose another cell at admin/structure/block.

Overlay on low size.

Hello guys!

What about an idea to alter table on the path "admin/structure/block" for mobile devices? We can just declare table elements as blocks and then get something like this:

It also solves an issue with the table wider than a viewport.

#4, If you begin to navigate from a narrow width (or on a mobile device), before clicking into an admin section, the overlay is not invoked.

c

Select element is narrowing on newer Webkit.

This feels like a duplicate of #2152525: Several admin pages with tables on them have enormous white gap on side on mobile and solution for this problem is being worked on here: #2280035: Add another responsive tables solution that doesn't hide content