fix(ui-pagination): make Pagination wrap on smaller screen sizes and prevent scrollbars

INSTUI-4461

Author: ToMESSKa

cypress/component/Pagination.cy.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React from 'react'
-import { Pagination, ScreenReaderContent } from '../../packages/ui'
+import { Pagination, ScreenReaderContent } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'
@@ -68,4 +68,54 @@ describe('<Pagination/>', () => {
       })
     })
   })
+
+  it('should wrap at a small viewport width', () => {
+    cy.mount(
+      <Pagination
+        as="nav"
+        margin="small"
+        variant="compact"
+        currentPage={4}
+        totalPageNumber={100000}
+        siblingCount={3}
+        boundaryCount={2}
+      />
+    )
+
+    cy.viewport(1000, 800)
+
+    cy.get('[role="navigation"]').within(() => {
+      cy.get('button').then(($items) => {
+        const firstItem = $items[0]
+        const firstItemTop = firstItem.getBoundingClientRect().top
+
+        let hasWrapped = false
+        $items.each((index, item) => {
+          const itemTop = item.getBoundingClientRect().top
+          if (index > 0 && itemTop > firstItemTop) {
+            hasWrapped = true
+          }
+        })
+        expect(hasWrapped).to.be.false
+      })
+    })
+
+    cy.viewport(300, 800)
+
+    cy.get('[role="navigation"]').within(() => {
+      cy.get('button').then(($items) => {
+        const firstItem = $items[0]
+        const firstItemTop = firstItem.getBoundingClientRect().top
+
+        let hasWrapped = false
+        $items.each((index, item) => {
+          const itemTop = item.getBoundingClientRect().top
+          if (index > 0 && itemTop > firstItemTop) {
+            hasWrapped = true
+          }
+        })
+        expect(hasWrapped).to.be.true
+      })
+    })
+  })
 })

packages/ui-pagination/src/Pagination/styles.ts

@@ -41,7 +41,9 @@ const generateStyle = (componentTheme: PaginationTheme): PaginationStyle => {
       all: 'unset',
       display: 'flex',
       alignItems: 'center',
-      gap: componentTheme.pageIndicatorGap
+      gap: componentTheme.pageIndicatorGap,
+      flexWrap: 'wrap',
+      justifyContent: 'center'
     },
     pagination: {
       label: 'pagination',
@@ -50,7 +52,8 @@ const generateStyle = (componentTheme: PaginationTheme): PaginationStyle => {
     pages: {
       label: 'pagination__pages',
       display: 'inline-flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      margin: '0.3rem'
     }
   }
 }