feat(table): restyle paginator with compact design and improved layout

[nitrosx]

Description

This PR introduces a visual redesign of the paginator component in the dynamic material table to improve user experience and visual consistency.

Motivation

Working with the dynamic material table, we wanted to have a consistent look, reduce the space used and clearly group the controls.

Changes:

Please provide a list of the changes implemented by this PR

• Visual Styling:

  • Added rounded borders (24px radius) with theme-aware border color
  • Reduced paginator height to 48px for a more compact appearance
  • Adjusted margins for better spacing

• Element Layout:

  • Reordered paginator controls: Items per page → Previous → Page info → Next
  • Added flexbox layout with proper alignment and gaps

• Form Field Fixes:

  • Fixed vertical alignment of page size selector form field (height: 30px)
  • Aligned labels and select value text vertically
  • Adjusted padding on form field infix, text field wrapper, and select trigger
  • Ensured consistent height across all internal elements

• CSS Classes:

  • Added datasets-paginator class to both header and footer paginators
  • Added datasets-header-paginator and datasets-footer-paginator for specific targeting

Files Changed:

1. src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html - Added CSS classes to paginator elements
2. src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss - Complete restyling of paginator appearance and layout

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

Not applicable

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

AI contribution

In producing this PR, Mistral AI mistral-medium-3.5 has been used through VIBE CLI application and VSCode Extension

Summary by Sourcery

Restyle the dynamic material table paginators with a more compact, theme-aligned layout and updated control ordering.

New Features:

• Introduce distinct paginator CSS classes for header and footer instances to enable targeted styling.

Enhancements:

• Apply a compact 48px-high flexbox layout to paginator containers with right-aligned controls and consistent spacing.
• Visually redesign Angular Material paginators with rounded borders and theme-aware outlines for improved UX and consistency.
• Reorder paginator controls so that the page-size selector appears first, followed by navigation buttons, page info, and next controls.
• Normalize the height and vertical alignment of the paginator page-size form field, label, and select value for a cleaner appearance.]} ....

[sourcery-ai]

Hey - I've left some high level feedback:

• The new global mat-paginator and ::ng-deep mat-paginator.mat-mdc-paginator rules will apply to all paginators in the app, not just this table; consider scoping them under .datasets-paginator or a wrapper to avoid unintended styling elsewhere.
• The paginator reordering block assigns order: 1 to multiple elements and then 2/3 to others; double-check whether this ordering achieves the intended sequence or if more explicit, unique order values would make the layout more predictable.
• There are several long commented DOM selector paths and multiple !important overrides in the paginator styles; trimming the comments and refactoring selectors to reduce reliance on ::ng-deep/!important would make these styles easier to maintain and less brittle against Material DOM changes.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The new global `mat-paginator` and `::ng-deep mat-paginator.mat-mdc-paginator` rules will apply to all paginators in the app, not just this table; consider scoping them under `.datasets-paginator` or a wrapper to avoid unintended styling elsewhere.
- The paginator reordering block assigns `order: 1` to multiple elements and then 2/3 to others; double-check whether this ordering achieves the intended sequence or if more explicit, unique `order` values would make the layout more predictable.
- There are several long commented DOM selector paths and multiple `!important` overrides in the paginator styles; trimming the comments and refactoring selectors to reduce reliance on `::ng-deep`/`!important` would make these styles easier to maintain and less brittle against Material DOM changes.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[nitrosx]

Screenshot of the new paginator style: