fix(VPagination): predictable length behavior in flex container

fixes #22907

Author: J-Sek

packages/vuetify/src/components/VPagination/VPagination.tsx

@@ -193,10 +193,14 @@ export const VPagination = genericComponent<VPaginationSlots>()({
     const range = computed(() => {
       if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return []
 
+
       if (totalVisible.value <= 0) return []
       else if (totalVisible.value === 1) return [page.value]
 
-      if (length.value <= totalVisible.value) {
+      if (
+        length.value <= totalVisible.value
+        || props.totalVisible == null && length.value < 3
+      ) {
         return createRange(length.value, start.value)
       }
 

packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.browser.tsx

@@ -23,6 +23,28 @@ describe('VPagination', () => {
     expect(screen.getAllByCSS('.v-pagination__item')).toHaveLength(3)
   })
 
+  it('should render all pages when length is less than 3 in a flexbox container', async () => {
+    render(() => (
+      <div class="d-flex">
+        <VPagination length="2" />
+      </div>
+    ))
+
+    expect(screen.getAllByCSS('.v-pagination__item')).toHaveLength(2)
+    expect(screen.getAllByCSS('.v-pagination__item .v-btn').at(0)).toHaveTextContent('1')
+    expect(screen.getAllByCSS('.v-pagination__item .v-btn').at(1)).toHaveTextContent('2')
+  })
+
+  it('should still honor an explicit total-visible when length is less than 3', () => {
+    render(() => (
+      <div class="d-flex">
+        <VPagination length="2" totalVisible="1" />
+      </div>
+    ))
+
+    expect(screen.getAllByCSS('.v-pagination__item')).toHaveLength(1)
+  })
+
   it('should render without first and last page buttons', () => {
     render(() => (
       <VPagination showFirstLastPage={ false } length="3" />