From 5aaa1f13c4af833e9fd72eba24695084e411776e Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 31 Jul 2026 17:50:45 +0200
Subject: [PATCH] Task/improve styling of type filter in activities table
 component (#7482)

* Improve styling

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../activities-table.component.html           |  4 ++-
 .../activities-table.component.scss           |  9 +++++++
 .../activities-table.component.stories.ts     | 25 +++++++++++++++++++
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 852e6f377..477048f59 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the style of the empty state in the _Fear & Greed Index_ component
+- Improved the style of the type filter in the activities table component (experimental)
 - Improved the language localization for German (`de`)
 
 ## 3.37.0 - 2026-07-30
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index 91a67d1cb..3d91852a0 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -1,4 +1,6 @@
-<div class="d-flex justify-content-end justify-content-lg-between">
+<div
+  class="align-items-center d-flex justify-content-end justify-content-lg-between"
+>
   <div class="d-none d-lg-flex">
     @if (hasPermissionToFilterByType) {
       <mat-form-field appearance="outline" class="without-hint">
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.scss b/libs/ui/src/lib/activities-table/activities-table.component.scss
index 5d4e87f30..4e98f726e 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.scss
+++ b/libs/ui/src/lib/activities-table/activities-table.component.scss
@@ -1,3 +1,12 @@
+@use '@angular/material' as mat;
+
 :host {
   display: block;
+
+  @include mat.form-field-overrides(
+    (
+      container-height: 2rem,
+      container-vertical-padding: 0.33rem
+    )
+  );
 }
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.stories.ts b/libs/ui/src/lib/activities-table/activities-table.component.stories.ts
index 57a8f18b6..057747cf1 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.stories.ts
+++ b/libs/ui/src/lib/activities-table/activities-table.component.stories.ts
@@ -494,3 +494,28 @@ export const Actions: Story = {
     totalItems: activities.length
   }
 };
+
+export const Toolbar: Story = {
+  args: {
+    dataSource,
+    baseCurrency: 'USD',
+    deviceType: 'desktop',
+    hasActivities: true,
+    hasPermissionToCreateActivity: true,
+    hasPermissionToDeleteActivity: true,
+    hasPermissionToExportActivities: true,
+    hasPermissionToFilterByType: true,
+    hasPermissionToOpenDetails: false,
+    locale: 'en-US',
+    pageIndex: 0,
+    pageSize: 10,
+    showAccountColumn: true,
+    showActions: false,
+    showCheckbox: false,
+    showNameColumn: true,
+    sortColumn: 'date',
+    sortDirection: 'desc',
+    sortDisabled: false,
+    totalItems: activities.length
+  }
+};