Rows per page options appear with 3 dots

Question

i'm using v-data-table and the row-per-page in the pooter apeare with 3 dots as follow:

any idea why?

here is my code:

<v-data-table v-if="setupHistory.length > 0" :headers="setupHistoryHeaders" :items="setupHistory" :expanded="expanded" item-key="_id" :items-per-page="5" @click:row="GetActionsForExpanded">
  <template v-slot:expanded-item="{ headers }">
                  <td :colspan="headers.length">
                    <actions
                      :actions="expandedActions"
                      top="500"
                      width="800"
                    ></actions>
                  </td>
                </template>
  <template v-slot:item.date="{ item }">
                  <span>{{ (" " + item.date) | formatDate }}</span>
                </template>

  <template v-slot:item.status="{ item }">
                  <v-icon
                    :color="getStatusIconColor(getItemStatus(item))"
                    >{{ " " + getStatusIcon(getItemStatus(item)) }}</v-icon
                  >
                  <span>{{ " " +  getItemStatus(item)}}</span>
                </template>
</v-data-table>

Answer 1

Have you tried getting this div class and then setting a min-width for that class in the style section?
Remeber to create the <style> section without the scoped attribute or won't change child components