From a3b10c75aaace396f0f70695db8896057fc602d7 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Mon, 8 Jun 2026 15:18:54 +0300 Subject: [PATCH] feat(mobile): keep mat-paginator within viewport, smarter first-page button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hide last-page button on mobile — it pushed the paginator past the viewport edge once the "1 – 30 of N" label got long (e.g. N=5000), triggering page-wide horizontal scroll - First-page button now hidden only while disabled (i.e. on page 1); appears once the user paginates past it and disappears again when they navigate back via that button. Selector covers all the disabled-state markers Material uses across versions (attribute, aria, mdc class) - Unify table paginator label "Rows per page:" → "Per page:" to match the audit page Co-Authored-By: Claude Opus 4.7 (1M context) --- .../db-table-view/db-table-view.component.ts | 2 +- frontend/src/styles.scss | 23 +++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts index 8f151871c..4579f2717 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts @@ -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(); } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 07e745d9b..f917c84b9 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -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; + } }