From 483b55cde953de677e625761bc98dface7b7f4a0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 9 Sep 2026 08:19:43 +0200
Subject: [PATCH] Task/improve style of dense selectors (#7856)

* Improve style of dense selectors

* Update changelog
---
 CHANGELOG.md                                         |  7 +++++++
 .../benchmark-comparator.component.html              |  2 +-
 .../benchmark-comparator.component.scss              |  9 ---------
 apps/client/src/styles/theme.scss                    | 12 ++++++++++++
 .../activities-table/activities-table.component.html |  5 ++++-
 .../activities-table/activities-table.component.scss |  9 ---------
 6 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8bbc07ae2..bbb6b1762 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the style of the activity type filter on the activities page (experimental)
+- Improved the style of the selector in the benchmark comparator
+
 ## 3.69.0 - 2026-09-07
 
 ### Changed
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
index 328cccba1..9ce99987a 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
@@ -12,7 +12,7 @@
   <div class="col-md-6 col-xs-12 d-flex justify-content-end">
     <mat-form-field
       appearance="outline"
-      class="w-100 without-hint"
+      class="gf-form-field-dense w-100 without-hint"
       color="accent"
     >
       <mat-label i18n>Compare with...</mat-label>
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.scss b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.scss
index 4dc8cf6b5..e02c91e3d 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.scss
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.scss
@@ -1,15 +1,6 @@
-@use '@angular/material' as mat;
-
 :host {
   display: block;
 
-  @include mat.form-field-overrides(
-    (
-      container-height: 2rem,
-      container-vertical-padding: 0.33rem
-    )
-  );
-
   .chart-container {
     aspect-ratio: 16 / 9;
 
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 3f8125011..d3c9e6022 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -149,6 +149,14 @@ $gf-typography: (
   regular-weight: 400
 );
 
+$_dense-form-field-theme: mat.define-theme(
+  (
+    density: (
+      scale: -4
+    )
+  )
+);
+
 .theme-light {
   color-scheme: light;
 
@@ -412,6 +420,10 @@ $gf-typography: (
     )
   );
 
+  .gf-form-field-dense {
+    @include mat.form-field-density($_dense-form-field-theme);
+  }
+
   .mat-accent {
     @include mat.button-overrides(
       (
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 9bfd44b9d..ded8fe8c8 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -3,7 +3,10 @@
 >
   <div class="d-none d-lg-flex">
     @if (hasPermissionToFilterByType && activityTypeOptions().length > 1) {
-      <mat-form-field appearance="outline" class="without-hint">
+      <mat-form-field
+        appearance="outline"
+        class="gf-form-field-dense without-hint"
+      >
         <mat-label i18n>Type</mat-label>
         <mat-select multiple [formControl]="typesFilter">
           @for (activityType of activityTypeOptions(); track activityType.key) {
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 4e98f726e..5d4e87f30 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.scss
+++ b/libs/ui/src/lib/activities-table/activities-table.component.scss
@@ -1,12 +1,3 @@
-@use '@angular/material' as mat;
-
 :host {
   display: block;
-
-  @include mat.form-field-overrides(
-    (
-      container-height: 2rem,
-      container-vertical-padding: 0.33rem
-    )
-  );
 }