feat(mobile): keep mat-paginator within viewport, smarter first-page button

- 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) <noreply@anthropic.com>

Author: karinakharchenko

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();
 	}
 

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;
+    }
 }