Skip to content

[O2B-1639] Adapt the pagination to phones and tablets - #2288

Merged
graduta merged 4 commits into
mainfrom
improv/O2B-1639/pagination-elements-to-support-mobile
Oct 23, 2026
Merged

graduta merged 4 commits into
mainfrom
improv/O2B-1639/pagination-elements-to-support-mobile

Conversation

@graduta

@graduta graduta commented Oct 23, 2026 •

Copy link
Copy Markdown
Member

I have a JIRA ticket

  • branch and/or PR name(s) include(s) JIRA ID
  • issue has "Fix version" assigned
  • issue "Status" is set to "In review"
  • PR labels are selected

Notable changes for users:

  • The pagination below the tables uses a smaller font (0.875rem), on every screen size.
  • The button selecting the number of rows is renamed from "Rows per page: 10" to "Rows: 10".
  • On phones (screens narrower than 768px), the pagination stays on one line instead of running out of the screen:
    • the buttons to jump to the first and last pages are hidden,
    • only the current page number and its two nearest ones are displayed (for example ← 2 3 4 →),
    • the rows count is shortened from "Rows 17 - 24 of 124" to "17-24/124".
  • On tablets and desktops, the pagination is unchanged, except for the smaller font.

Notable changes for developers:

  • The changes are in the shared pagination components, so every page displaying a table pagination benefits (18 views). No page-specific code is needed.
  • paginationComponent has new class names (pagination-bar, pagination-amount, pagination-count, and pagination-count-long / pagination-count-short for the two versions of the rows count), and pageSelector flags the three pages nearest to the current one with near-page. The rules hiding the elements on phones are in app.css (media query at 767px).
  • Test assertions on the text of the rows button are updated in 8 test suites (Rows per page: N becomes Rows: N).
  • A test (log overview) checks on a phone viewport and a tablet viewport that the pagination fits on one line, and which buttons and which rows count are displayed. It was not run locally, nor were the updated assertions.
  • The layout was checked by hand on a phone, tablet and desktop viewport on the log overview, and on a phone viewport on the runs overview.

Changes made to the database:

  • None

🤖 Generated with Claude Code

@codecov

codecov Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 46.27%. Comparing base (f7c5e77) to head (59399d1).

Files with missing lines Patch % Lines
lib/public/components/Pagination/pageSelector.js 0.00% 10 Missing ⚠️
lib/public/components/Pagination/amountSelector.js 0.00% 1 Missing ⚠️
...ublic/components/Pagination/paginationComponent.js 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2288      +/-   ##
==========================================
- Coverage   46.31%   46.27%   -0.05%     
==========================================
  Files        1056     1056              
  Lines       17440    17445       +5     
  Branches     3183     3184       +1     
==========================================
- Hits         8078     8072       -6     
- Misses       9362     9373      +11     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@graduta
graduta force-pushed the improv/O2B-1639/pagination-elements-to-support-mobile branch from 1e2d54a to 32f3208 Compare October 23, 2026 09:19
@graduta
graduta changed the base branch from main to improv/O2B-1638/filter-header-to-support-mobile October 23, 2026 09:19
@graduta
graduta added this pull request to stack #2289 October 23, 2026 09:34
Base automatically changed from improv/O2B-1638/filter-header-to-support-mobile to main October 23, 2026 09:37
The pagination uses a smaller font and its rows amount button is renamed from Rows per page to Rows. On phones, it stays on one line: the buttons to jump to the first and last pages and the page numbers far from the current one are hidden, and the rows count is shortened to first-last/total. The pagination is shared by every overview page.
@graduta
graduta force-pushed the improv/O2B-1639/pagination-elements-to-support-mobile branch from 32f3208 to 2111128 Compare October 23, 2026 09:39
… with wider fonts

With a wider font than the one used when developing (the default sans-serif font of Linux), the pagination of phones was wider than the screen and overflowed, the rows amount button, the page buttons and the rows count being on one line. The padding and the margins of the page buttons and of the rows amount button are reduced.
…d the pagination ones

Two closing braces of the rules of the filters panel on phones were lost while resolving a conflict with the filters PR: the pagination rules that follow were nested in the rule of the filter inputs and never applied, the pagination of phones and tablets staying the one of desktops.
… to display all the page buttons

On phones (screens narrower than 768px) the page selector only displays the three page buttons nearest to the current one. The tests checking that the page selector dynamically switches between visible pages clicked on the fifth page button while running on a viewport of 700px: they now run it on a viewport of 800px, and restore the previous one afterwards.
@graduta
graduta merged commit 4616355 into main Oct 23, 2026
23 of 26 checks passed
@graduta
graduta deleted the improv/O2B-1639/pagination-elements-to-support-mobile branch October 23, 2026 11:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

1 participant