fix(VPagination): adapt button width for large values

[J-Sek]

Description

fixes #20120

Markup:

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-number-input v-model="page" label="page" />
        </v-col>
        <v-col>
          <v-select v-model="density" :items="densityOptions" label="density" return-object />
        </v-col>
        <v-col>
          <v-select v-model="rounded" :items="roundedOptions" label="rounded" return-object />
        </v-col>
      </v-row>

      <v-pagination
        v-model="page"
        :density="density.value"
        :length="244444"
        :rounded="rounded.value"
        :total-visible="page > 10000 ? 4 : page > 1000 ? 5 : page > 100 ? 6 : 7"
        class="my-12"
      />
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const page = ref(1)

  interface DensityOption { title: string, value: 'compact' | 'comfortable' | undefined }
  const densityOptions = [...['compact', 'comfortable'].map(x => ({ title: x, value: x } as DensityOption)), { title: '(default)', value: undefined }]
  const density = ref<DensityOption>(densityOptions.at(-1)!)

  interface RoundedOption { title: string, value: 'sm' | 'xl' | 'pill' | undefined }
  const roundedOptions = [...['sm', 'xl', 'pill'].map(x => ({ title: x, value: x } as RoundedOption)), { title: '(default)', value: undefined }]
  const rounded = ref<RoundedOption>(roundedOptions.at(-1)!)
</script>

[J-Sek]

Introduces

$button-pagination-padding-inline: .75em !default;

It looks better with .5em when using density="compact" and we could possibly bake this into those styles, but I don't want to over-complicate them, so let's leave it on the developers.

[KaelWD]

Going even smaller with 5px looks fine to me and keeps the square ratio for 2 digits at comfortable and 3 digits at default.

Out of scope for this PR but we could do with a feedback loop for sizing, this should drop an item:

[J-Sek]

I agree, it looks much better with 5px default.