Task/improve style of dense selectors (#7856)

* Improve style of dense selectors

* Update changelog

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

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>

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;
 

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(
       (

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) {

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