feat(ui): sticky page controls with flexbox layout

.claude/skills/triage-ci-flake/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: triage-ci-flake
-description: Use when CI tests fail on main branch after PR merge, or when investigating flaky test failures in CI environments
+description: Use when CI tests fail on main branch after PR merge, when investigating flaky test failures, or when user provides a PR URL/number to aggregate all failing tests
 allowed-tools: Write, Bash(date:*), Bash(mkdir -p *)
 ---
 
@@ -18,6 +18,73 @@ Systematic workflow for triaging and fixing test failures in CI, especially flak
 - Test passes locally but fails in CI
 - Test failure labeled as "flaky" or intermittent
 - E2E or integration test timing out in CI only
+- User provides a PR URL/number with failing checks
+
+## PR-Based Workflow (When PR URL/Number Provided)
+
+When the user provides a PR URL (e.g., `https://github.com/payloadcms/payload/pull/16701`) or PR number:
+
+### Step 1: Fetch PR Status Checks
+
+First, use `tool_search` with query "github pull request status checks" to load the GitHub tools.
+
+Then use the `github-pull-request_pullRequestStatusChecks` tool to get all failing checks:
+
+```
+Tool: github-pull-request_pullRequestStatusChecks
+Parameters:
+  pullRequestNumber: <extracted from URL or provided>
+  repo: { owner: "payloadcms", name: "payload" }
+```
+
+### Step 2: Aggregate Failing Tests
+
+Parse the status checks response and create a summary table:
+
+| Suite                 | Check Status | Target URL |
+| --------------------- | ------------ | ---------- |
+| admin**e2e**list-view | failed       | [link]     |
+| plugin-import-export  | failed       | [link]     |
+
+For each failing check, the `context` field contains the test suite name (e.g., `admin__e2e__list-view`).
+
+### Step 3: Extract Failure Details from Each Check
+
+For each failing check:
+
+1. Visit the `targetUrl` to get detailed failure logs
+2. Extract the specific test name and error message
+3. Add to the aggregated failure list
+
+Present a consolidated summary:
+
+```markdown
+## Failing Tests Summary
+
+### 1. admin**e2e**list-view (3/4)
+
+- **Test**: "should use custom pagination limit"
+- **Error**: Locator `.per-page__button` not found
+- **File**: test/admin/e2e/list-view/e2e.spec.ts:1495
+
+### 2. plugin-import-export
+
+- **Test**: "should inherit limit from list view URL"
+- **Error**: Locator `.per-page__button` not found
+- **File**: test/plugin-import-export/e2e.spec.ts:150
+```
+
+### Step 4: Identify Common Patterns
+
+Look for patterns across failures:
+
+- Same selector errors → likely a component change needing test updates
+- Same test file → localized issue
+- Different errors in same suite → may be test pollution
+
+### Step 5: Proceed with Triage
+
+For each unique failure, follow the standard reproduction workflow below.
 
 ## MANDATORY First Steps
 

packages/next/src/views/Versions/cells/AutosaveCell/index.css

@@ -0,0 +1,7 @@
+@layer payload-default {
+  .autosave-cell__items {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.5);
+  }
+}

packages/next/src/views/Versions/cells/AutosaveCell/index.tsx

@@ -5,7 +5,7 @@ import { Pill, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 import { VersionPillLabel } from '../../../Version/VersionPillLabel/VersionPillLabel.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'autosave-cell'
 

packages/next/src/views/Versions/index.client.tsx

@@ -3,8 +3,7 @@ import type { Column, SanitizedCollectionConfig } from 'payload'
 
 import {
   LoadingOverlayToggle,
-  Pagination,
-  PerPage,
+  PageControlsComponent,
   Table,
   useListQuery,
   useTranslation,
@@ -40,35 +39,13 @@ export const VersionsViewClient: React.FC<{
       {versionCount > 0 && (
         <React.Fragment>
           <Table columns={columns} data={data?.docs} />
-          <div className={`${baseClass}__page-controls`}>
-            <Pagination
-              hasNextPage={data.hasNextPage}
-              hasPrevPage={data.hasPrevPage}
-              limit={data.limit}
-              nextPage={data.nextPage}
-              numberOfNeighbors={1}
-              onChange={handlePageChange}
-              page={data.page}
-              prevPage={data.prevPage}
-              totalPages={data.totalPages}
-            />
-            {data?.totalDocs > 0 && (
-              <React.Fragment>
-                <div className={`${baseClass}__page-info`}>
-                  {data.page * data.limit - (data.limit - 1)}-
-                  {data.totalPages > 1 && data.totalPages !== data.page
-                    ? data.limit * data.page
-                    : data.totalDocs}{' '}
-                  {i18n.t('general:of')} {data.totalDocs}
-                </div>
-                <PerPage
-                  handleChange={handlePerPageChange}
-                  limit={limit ? Number(limit) : 10}
-                  limits={paginationLimits}
-                />
-              </React.Fragment>
-            )}
-          </div>
+          <PageControlsComponent
+            data={data}
+            handlePageChange={handlePageChange}
+            handlePerPageChange={handlePerPageChange}
+            limit={limit ? Number(limit) : 10}
+            limits={paginationLimits}
+          />
         </React.Fragment>
       )}
     </React.Fragment>

packages/next/src/views/Versions/index.css

@@ -0,0 +1,70 @@
+@layer payload-default {
+  .versions {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .versions__wrap {
+    padding-top: 0;
+    padding-bottom: var(--spacing-view-bottom);
+    margin-top: calc(var(--base) * 0.75);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .versions__header {
+    margin-bottom: var(--base);
+  }
+
+  .versions__no-versions {
+    margin-top: calc(var(--base) * 1.5);
+  }
+
+  .versions__parent-doc .banner__content {
+    display: flex;
+  }
+
+  [dir='ltr'] .versions__parent-doc-pills {
+    margin-left: auto;
+  }
+
+  [dir='rtl'] .versions__parent-doc-pills {
+    margin-right: auto;
+  }
+
+  .versions .table table {
+    width: 100%;
+    overflow: auto;
+  }
+
+  .versions .paginator {
+    margin-bottom: 0;
+  }
+
+  /* on mobile, extend the table all the way to the viewport edges */
+  /* this is to visually indicate overflowing content */
+  @media (max-width: 768px) {
+    .versions__wrap {
+      padding-top: 0;
+      margin-top: 0;
+    }
+
+    .versions .table {
+      display: flex;
+      width: calc(100% + calc(var(--gutter-h) * 2));
+      max-width: unset;
+      left: calc(var(--gutter-h) * -1);
+      position: relative;
+      padding-left: var(--gutter-h);
+    }
+
+    .versions .table::after {
+      content: '';
+      height: 1px;
+      padding-right: var(--gutter-h);
+    }
+  }
+}

packages/next/src/views/Versions/index.tsx

@@ -8,7 +8,7 @@ import { fetchLatestVersion, fetchVersions } from '../Version/fetchVersions.js'
 import { VersionDrawerCreatedAtCell } from '../Version/SelectComparison/VersionDrawer/CreatedAtCell.js'
 import { buildVersionColumns } from './buildColumns.js'
 import { VersionsViewClient } from './index.client.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'versions'
 

packages/translations/src/clientKeys.ts

@@ -326,6 +326,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:permanentlyDelete',
   'general:permanentlyDeletedCountSuccessfully',
   'general:perPage',
+  'general:perPageLabel',
   'general:previous',
   'general:reindex',
   'general:reindexingAll',

packages/translations/src/languages/ar.ts

@@ -380,6 +380,7 @@ export const arTranslations: DefaultTranslationsObject = {
     permanentlyDelete: 'حذف بشكل دائم',
     permanentlyDeletedCountSuccessfully: 'تم حذف {{count}} {{label}} بشكل دائم بنجاح.',
     perPage: 'لكلّ صفحة: {{limit}}',
+    perPageLabel: 'لكل صفحة:',
     previous: 'سابق',
     reindex: 'إعادة الفهرسة',
     reindexingAll: 'جاري إعادة فهرسة جميع {{collections}}.',

packages/translations/src/languages/az.ts

@@ -394,6 +394,7 @@ export const azTranslations: DefaultTranslationsObject = {
     permanentlyDelete: 'Daimi Olaraq Sil',
     permanentlyDeletedCountSuccessfully: '{{count}} {{label}} uğurla daimi olaraq silindi.',
     perPage: 'Hər səhifədə: {{limit}}',
+    perPageLabel: 'Səhifə başına:',
     previous: 'Əvvəlki',
     reindex: 'Yenidən indekslə',
     reindexingAll: 'Bütün {{collections}} yenidən indekslənir.',

packages/translations/src/languages/bg.ts

@@ -390,6 +390,7 @@ export const bgTranslations: DefaultTranslationsObject = {
     permanentlyDelete: 'Трайно изтриване',
     permanentlyDeletedCountSuccessfully: 'Успешно изтрити завинаги {{count}} {{label}}.',
     perPage: 'На страница: {{limit}}',
+    perPageLabel: 'На страница:',
     previous: 'Предишен',
     reindex: 'Преиндексиране',
     reindexingAll: 'Преиндексиране на всички {{collections}}.',

packages/translations/src/languages/bnBd.ts

@@ -396,6 +396,7 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     permanentlyDeletedCountSuccessfully:
       'স্থায়ীভাবে {{count}} {{label}} সফলভাবে মুছে ফেলা হয়েছে।',
     perPage: 'প্রতি পৃষ্ঠায়: {{limit}}',
+    perPageLabel: 'প্রতি পৃষ্ঠা:',
     previous: 'পূর্ববর্তী',
     reindex: 'পুনরায় সূচিবদ্ধ করুন',
     reindexingAll: 'সমস্ত {{collections}} পুনরায় সূচিবদ্ধ করা হচ্ছে।',