fix(VPagination): adapt button width for large values (#21139)

fixes #20120

Author: J-Sek

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -234,6 +234,9 @@
   // VPagination
   .v-pagination
     .v-btn
+      width: auto
+      padding-inline: $button-pagination-padding-inline
+      @include button-density('min-width', $button-icon-density)
       @include tools.rounded($button-pagination-border-radius)
 
       &--rounded
@@ -242,5 +245,11 @@
       &__overlay
         transition: none
 
+    &__prev,
+    &__next
+      .v-btn
+        padding-inline: 0
+        @include button-density('width', $button-icon-density)
+
     .v-pagination__item--is-active .v-btn__overlay
       opacity: $button-pagination-active-overlay-opacity

packages/vuetify/src/components/VBtn/_variables.scss

@@ -12,6 +12,7 @@ $button-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !
 $button-banner-actions-padding: 0 8px !default; // @deprecated
 $button-pagination-active-overlay-opacity: var(--v-border-opacity) !default;
 $button-pagination-border-radius: settings.$border-radius-root !default;
+$button-pagination-padding-inline: 5px !default;
 $button-pagination-rounded-border-radius: map.get(settings.$rounded, 'circle') !default;
 $button-border-color: settings.$border-color-root !default;
 $button-border-radius: settings.$border-radius-root !default;