feat(VDataTable): prevent overflow in mobile data tables

Add a new class to the mobile data table to prevent overflow on small screens. closes vuetifyjs#19781
hridaya14 · Nov 26, 2024 · d4d1adc · d4d1adc
1 parent 54e430f
commit d4d1adc
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -133,6 +133,14 @@
     text-align: center
 
   .v-data-table__tr--mobile
+
+    .v-data-table__td-value 
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
+      max-width: 100%
+      width: 100%
+
     > .v-data-table__td--expanded-row
       grid-template-columns: 0
       justify-content: center