[Feature Request] Prevent overflow in mobile data tables

[donalmurtagh]

Problem to solve

If the content of a mobile data table cell is too long, it breaks the layout

Proposed solution

The following style rule truncates the cell content to a single line when the data table is in mobile mode

.v-data-table__tr--mobile .v-data-table__td-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Demo

Remove the <style> element to see the problem without the solution

API Proposal

The style rule above should be enabled by a boolean prop that is false by defaults in order to avoid making this a breaking change.