[Bug Report][3.6.1] VDataTable mobile mode is based on screen width, not container width about vuetify HOT 4 CLOSED

Adding a couple screenshots to illustrate my point: with the vuetify docs site itself, at 1280x720, the example table is perfectly readable:

When I reduce the viewport by 1px, the table goes into mobile mode, which now makes the page completely unreadable as the rest of the page is still designed for desktop mode:

from vuetify.

You can set the mobile prop to false and it will disable it. You can also specifically set which breakpoint it should break to mobile by setting the same prop using useDisplay. 1280 is a default mobile size so that is correct, so personally I like to set it as smAndDown.

Basic example

from vuetify.

Thanks. Yes, I understand that this can be adjusted or disabled manually so a workaround exists.

I'd still consider this a bug though since it's not working "as advertised". I think it makes the most sense for the mobile layout to be disabled by default and only enabled if a breakpoint is explicitly set. Other components such as stepper is already done this way. There are a few reasons for it:

• DataTable isn't a page layout component and don't have to scale with the screen, so it doesn't make sense to change layouts based on the viewport size. The desktop and mobile layouts are also significantly different which means they may require separate design attention. This is what sets it apart from most other automatically-responsive components like nav drawer, toolbar, etc.
• The breakpoint isn't one-size-fits-most unlike other components. What fits in a certain width varies depending on the content inside. So picking 1280px arbitrarily is counter-productive since this default isn't necessarily "better most of the time".
• It's more likely for someone to leave the default in by accident, than actually wanting the default behavior. Someone designing for mobile would be already testing at different sizes and setting breakpoints anyways. But someone who doesn't care about mobile likely won't even know the mobile layout is a feature, and end up leaving it in resulting in a bug down the line.
• It's also a silent behavior change from 3.5, so it can easily be added to existing apps by accident.

from vuetify.

You do make some good points to be considered.

from vuetify.