fix(VPagination): predictable length behavior in flex container

fixes #22907

Author: J-Sek

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

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

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

@@ -3,7 +3,7 @@ import { VPagination } from '../VPagination'
 import { VLocaleProvider } from '@/components/VLocaleProvider'
 
 // Utilities
-import { page, render, screen, showcase, userEvent } from '@test'
+import { page, render, screen, showcase, userEvent, waitIdle } from '@test'
 import { ref } from 'vue'
 
 const stories = {
@@ -23,6 +23,30 @@ 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>
+    ))
+
+    await waitIdle() // resize-observer loop has to settle
+
+    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 react to mouse navigation', async () => {
     render(() => (
       <VPagination length="3" />