Suggested change to the collapsing of tables in CP

[lukeyouell]

Description

I use the Magnet app on my iMac and usually work with my screen split in two, one half being taken up by Atom and the other by my browser which has recently started causing tables in the CP to collapse.

At the moment I believe the CP breakpoint is set to 1300px, whereas half of an iMac's screen size is 1280px which can be quite frustrating at times. Are there any reasons against dropping this breakpoint below 1280px?

Additional info

• Craft version: 3.0.2

[janhenckens]

I use a similar setup (high resolution Dell monitor instead of an iMac) and notice this too. Not a big deal but bit of on inconvenience none the less.

[lukeyouell]

I've been made aware that tables collapse into blocks depending on the size of the content rather than CSS breakpoints, I've changed the issue title to reflect this.

Collapsing tables to blocks on desktop doesn't really feel like it works too well, personally I'd prefer to scroll horizontally than see a complete switch from tables to blocks.

[carlcs]

Yeah horizontal scrolling or something like http://filamentgroup.github.io/tablesaw/demo/swipe.html

[brandonkelly]

Collapsible tables will collapse once there is not enough horizontal room to display the table without it bleeding out of its container element. So depends on the content of the table and the number of columns; not a CSS rule. I’ll leave this open though, as there’s probably better options, like that TableSaw lib @carlcs linked.

[stevehurst]

I've added a JS injection to our control panel to completely disable collapsing tables.

function removeCollapsed() {
    $('table.collapsed').removeClass('collapsed');
}

$(window).resize(function(){
    removeCollapsed();
});

$(document).ready(function() {
    removeCollapsed();
});

I'm concerned that this conflicts with the built-in window resize function, but it works to disable it.

We had half of our Entry and Asset tables collapsing due to long column content and fields displayed, and the result was heavily unusable.

[brandonkelly]

As of Craft 3.4, all built-in Control Panel tables will scroll horizontally rather than collapsing.

Plugin devs: To switch a collapsible table to a scrollable one, remove its collapsible class and wrap it in a div with a scrolltable class:

<!-- old -->
<table class="data fullwidth collapsible">
    ...
</table>

<!-- new -->
<dvi class="scrolltable">
    <table class="data fullwidth">
        ...
    </table>
</div>