refactor: make search/pagination & dynamic mat table headers more compact

[abdimo101]

Description

Before:

After:

Motivation

Background on use case, changes needed

Fixes:

Please provide a list of the fixes implemented in this PR

• Items added

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Tests included

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

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

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

Summary by Sourcery

Compact the dynamic material table layout and related search/pagination controls.

Enhancements:

• Add a bottom border to dynamic tables for clearer visual separation.
• Reduce header and data row height to make the table more compact.
• Tighten vertical spacing around the search and filter container to reduce empty space and overall table footprint.

[sourcery-ai]

Hey - I've left some high level feedback:

• The use of !important on mat-header-row.header and mat-row.table-row can make future styling overrides difficult; consider increasing selector specificity or adjusting the base styles instead of relying on !important.
• Hardcoded colors like #d2d2d2 and #efefef may diverge from the design system or theme; consider using existing theme variables or SCSS variables for these borders/backgrounds.
• The fixed 40px row height on all header and data rows may not accommodate multi-line content or larger text; verify that this constraint won’t cause layout issues and consider using min-height only or responsive adjustments if necessary.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The use of `!important` on `mat-header-row.header` and `mat-row.table-row` can make future styling overrides difficult; consider increasing selector specificity or adjusting the base styles instead of relying on `!important`.
- Hardcoded colors like `#d2d2d2` and `#efefef` may diverge from the design system or theme; consider using existing theme variables or SCSS variables for these borders/backgrounds.
- The fixed `40px` row height on all header and data rows may not accommodate multi-line content or larger text; verify that this constraint won’t cause layout issues and consider using `min-height` only or responsive adjustments if necessary.

---

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.}

[Junjiequan]

Do we need this ?

[abdimo101]

When I set the height of each row (lines 106-111), it cuts off the last rows bottom border, which is why this is needed

[Junjiequan]

If it custs off the bottom space, there might be some css issues.
could you check if it is easy to fix, if it's tricky to fix we just merge it

[Junjiequan]

Looks fine to me, just a left one comment

[Junjiequan]

If it custs off the bottom space, there might be some css issues.
could you check if it is easy to fix, if it's tricky to fix we just merge it

[Junjiequan]

THe top border also cuts off when user is not logged in