mobile: keep paginator within viewport, smarter first-page button

[karinakharchenko]

Summary

Fix the mobile paginator so it stops pushing the page into horizontal scroll on large tables, and bring back the « first-page button only when it's actually useful.

• Hide the last-page button on mobile (it was the main culprit — the "1 – 30 of 5000" label plus all four nav buttons no longer fit at narrow widths)
• First-page button now hidden only while disabled (i.e. on page 1); it appears as soon as the user paginates past page 1 and disappears again after navigating back via it. Selector covers all the disabled markers Material uses across versions ([disabled], [aria-disabled="true"], .mat-mdc-button-disabled, .mdc-icon-button--disabled)
• Unify the table paginator label "Rows per page:" → "Per page:" to match the audit page

Test plan

• Open a table with many rows on a mobile viewport — no page-wide horizontal scroll
• Paginator shows [Prev] N–M of K [Next] on page 1; the « (first-page) button is not visible
• Tap Next — the « button now appears as [« First] [Prev] N–M of K [Next]
• Tap « First — page goes back to 1, the « button hides again
• The » (last-page) button is never visible on mobile
• Label reads "Per page:" on both the dashboard table and the audit table
• Desktop paginator is unchanged

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Updated paginator label text for improved clarity
  • Enhanced mobile paginator display with optimized navigation button visibility and text overflow handling

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR makes targeted refinements to the paginator component's mobile presentation: shortening the "items per page" label text to save space and adding CSS rules to the mobile media query that hide unnecessary navigation buttons and constrain the range label to prevent wrapping.

Changes

Mobile Paginator UX Refinement

Layer / File(s)	Summary
Paginator label text update frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts	The paginator's itemsPerPageLabel is shortened from "Rows per page:" to "Per page:" to reduce space consumption on mobile.
Mobile paginator layout and visibility frontend/src/styles.scss	Mobile media query rules added to hide the last-page button unconditionally, hide the first-page button when disabled, and prevent the range label from wrapping by applying white-space: nowrap and reducing font-size to 12px.

🎯 2 (Simple) | ⏱️ ~8 minutes

🐰 A hop, a CSS tweak, labels made lean,
Mobile paginators now pristine and clean,
No wrapping, no sprawl on the tiniest screen,
Buttons that vanish when they shouldn't be seen! ✨

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly summarizes the main changes: mobile paginator viewport optimization and smarter first-page button visibility control, which are the primary objectives of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Security Check	✅ Passed	PR contains only UI text label and CSS styling changes with no security implications, no user input processing, no auth/data handling changes, and complies with OWASP security principles.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch mobile-pagination

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/styles.scss`:
- Around line 264-268: Update the misleading comment above the CSS rule for
.mat-mdc-paginator .mat-mdc-paginator-range-label: replace "Wrap the long range
label so the paginator stays within the viewport." with a clarification that
matches the rule's behavior, e.g., "Prevent the range label from wrapping and
reduce font size to keep the paginator within the viewport." Leave the CSS
selectors and properties (white-space: nowrap; font-size: 12px;) unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bc22ac4d-7abf-490f-9d5b-57f9cd3eea46

📥 Commits

Reviewing files that changed from the base of the PR and between 9cb5a1c and a3b10c7.

📒 Files selected for processing (2)

• frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
• frontend/src/styles.scss

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Clarify the comment: "Wrap" is misleading when using white-space: nowrap.

The comment says "Wrap the long range label" but the CSS rule white-space: nowrap prevents wrapping (keeps text on a single line). In CSS context, "wrap" typically refers to text flowing to multiple lines, making this comment confusing.

Consider rewording to: "Prevent the range label from wrapping and reduce font size to keep the paginator within the viewport."

📝 Proposed fix for comment clarity

-    /* Wrap the long range label so the paginator stays within the viewport. */
+    /* Prevent the range label from wrapping and reduce font size to keep the paginator within the viewport. */
     .mat-mdc-paginator .mat-mdc-paginator-range-label {
         white-space: nowrap;
         font-size: 12px;
     }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/styles.scss` around lines 264 - 268, Update the misleading
comment above the CSS rule for .mat-mdc-paginator
.mat-mdc-paginator-range-label: replace "Wrap the long range label so the
paginator stays within the viewport." with a clarification that matches the
rule's behavior, e.g., "Prevent the range label from wrapping and reduce font
size to keep the paginator within the viewport." Leave the CSS selectors and
properties (white-space: nowrap; font-size: 12px;) unchanged.