fix(VDataTable): rtl mobile alignment

[AmeerHamzaRiaz]

Description

This PR aims to fix rtl alignment for data-table mobile view.

repro: https://play.vuetifyjs.com/#eNpdTzFuwzAM/AqhJUtc74YTIEO3/iDOwMgsKoCWCIk2CgT5e2WpbpMsong83h3PN5OibU8ib8tMpjO90iSMSsfBA/RLgyLlWxobvKLzFH+hAnKwyNRIDIsbKUJU/hsXwoiKjeKVCTqX9dNhMKUOBqZwdUzHvn2k/atn+EV+C5Mnz2lWpIbt24cjcptsdKKQSOd6S15MCiUCHOBcFW+bqceJOtidPqOz6OGdSb7Q626/EZKQdZQy5yN8h3FNAVjZuLHupV7WMNU+G5v73s/M5bn8APSZe0g=

Markup:

This issue is reproducible by rendering a data-table mobile view in rtl.

<template>
  <v-app>
    <v-container>
      <v-locale-provider rtl>
        <v-data-table :items="items" mobile />
      </v-locale-provider>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  const items = [
    {
      name: 'African Elephant',
      species: 'Loxodonta africana',
    },
  ]
</script>