Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karinakharchenko wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export class DbTableViewComponent implements OnInit, OnChanges {
private cdr: ChangeDetectorRef,
private paginatorIntl: MatPaginatorIntl,
) {
this.paginatorIntl.itemsPerPageLabel = 'Rows per page:';
this.paginatorIntl.itemsPerPageLabel = 'Per page:';
this.paginatorIntl.changes.next();
}

Expand Down
23 changes: 23 additions & 0 deletions frontend/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,4 +243,27 @@ body:has(.ai-panel-sidebar-content_open) .add-row-fab {
app-db-table-view .field-copy-button {
display: none !important;
}

/* Last-page button always hidden on mobile — would push the paginator wider
than the viewport (causing page-wide horizontal scroll) once the range
label gets long (e.g. "1 – 30 of 5000"). Prev/Next is enough on mobile. */
.mat-mdc-paginator-navigation-last {
display: none !important;
}

/* First-page button only visible when there is a previous page (i.e., not on
page 1). Material marks it disabled on page 1, which we use as a hook
via multiple attribute/class names depending on Material version. */
.mat-mdc-paginator-navigation-first[disabled],
.mat-mdc-paginator-navigation-first[aria-disabled="true"],
.mat-mdc-paginator-navigation-first.mat-mdc-button-disabled,
.mat-mdc-paginator-navigation-first.mdc-icon-button--disabled {
display: none !important;
}

/* Wrap the long range label so the paginator stays within the viewport. */
.mat-mdc-paginator .mat-mdc-paginator-range-label {
white-space: nowrap;
font-size: 12px;
}
Comment on lines +264 to +268

@coderabbitai coderabbitai Bot Jun 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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.

}
Loading