[Bug Report][3.7.2] v-data-table data-table-expand header title missing in mobile display mode

[khgreav]

Environment

Vuetify Version: 3.7.2
Vue Version: 3.5.10
Browsers: Firefox 130.0
OS: Linux

Steps to reproduce

1. Add data-table-expand header with title
2. Set display mode to mobile

Expected Behavior

Column (header) title is visible, expand button is aligned to end by default

Actual Behavior

Column (header) title is missing, expand button is centered

Reproduction Link

https://play.vuetifyjs.com/#...

[jcjp]

I looked into to your reproduction link, and I could see the header title and the expansion button on the center. Do you have a screenshot or a video of the issue that you experience?

[khgreav]

@jcjp Hi, thanks for taking the time. The column headers are visible, the issue is specifically with the data-table-expand slot and column when a datatable is displayed in mobile mode, as the other columns do have their titles, and the display data aligned to left and right respectively.

May be a design choice, and I can achieve the same behavior by adding another column, instead of using the data-table-expand column. If that behavior is intended, this issue can be closed.

Since I had to go back and check how the data-table-expand column behaves, I noticed that the size/styling of the expand button in this example from docs breaks with mobile display, so there may be some clashing styles.

Normal:

Mobile display:

[jcjp]

Hi @khgreav yes this is by design, and thank you for pointing out an issue with an example with the docs, definitely we need to check that part and create a bug accordingly. As for this one I will close it now thanks!