From c30a720684974045bf75a105fbaf581a9c1a1dd4 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 22 Oct 2026 17:25:32 +0200
Subject: [PATCH] Improve style of close button in dialogs

---
 libs/ui/src/lib/dialog-footer/dialog-footer.component.html | 5 ++++-
 libs/ui/src/lib/dialog-footer/dialog-footer.component.scss | 1 -
 libs/ui/src/lib/dialog-header/dialog-header.component.html | 5 ++++-
 libs/ui/src/lib/dialog-header/dialog-header.component.scss | 4 ----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/libs/ui/src/lib/dialog-footer/dialog-footer.component.html b/libs/ui/src/lib/dialog-footer/dialog-footer.component.html
index b29dfd7239..461f839822 100644
--- a/libs/ui/src/lib/dialog-footer/dialog-footer.component.html
+++ b/libs/ui/src/lib/dialog-footer/dialog-footer.component.html
@@ -1,7 +1,10 @@
 @if (deviceType === 'mobile') {
   <div class="d-flex justify-content-center" mat-dialog-actions>
     <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon class="d-block text-body-secondary" name="close-outline" />
+      <ion-icon
+        class="d-block mat-icon text-body-secondary"
+        name="close-outline"
+      />
     </button>
   </div>
 }
diff --git a/libs/ui/src/lib/dialog-footer/dialog-footer.component.scss b/libs/ui/src/lib/dialog-footer/dialog-footer.component.scss
index 4268e83fab..0f41fc37bc 100644
--- a/libs/ui/src/lib/dialog-footer/dialog-footer.component.scss
+++ b/libs/ui/src/lib/dialog-footer/dialog-footer.component.scss
@@ -2,7 +2,6 @@
   display: block;
 
   button[mat-icon-button] {
-    // Show the touch target of 48px, which the density of the theme hides
     --mat-icon-button-touch-target-display: block;
   }
 }
diff --git a/libs/ui/src/lib/dialog-header/dialog-header.component.html b/libs/ui/src/lib/dialog-header/dialog-header.component.html
index 6345dff8a9..023548a562 100644
--- a/libs/ui/src/lib/dialog-header/dialog-header.component.html
+++ b/libs/ui/src/lib/dialog-header/dialog-header.component.html
@@ -10,7 +10,10 @@
   >
   @if (deviceType() !== 'mobile') {
     <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon class="d-block text-body-secondary" name="close-outline" />
+      <ion-icon
+        class="d-block mat-icon text-body-secondary"
+        name="close-outline"
+      />
     </button>
   }
 </div>
diff --git a/libs/ui/src/lib/dialog-header/dialog-header.component.scss b/libs/ui/src/lib/dialog-header/dialog-header.component.scss
index 43aa12cf35..c7dbf3b951 100644
--- a/libs/ui/src/lib/dialog-header/dialog-header.component.scss
+++ b/libs/ui/src/lib/dialog-header/dialog-header.component.scss
@@ -2,16 +2,12 @@
   display: block;
 
   button[mat-icon-button] {
-    // Move the button to the corner with the same distance to the top and to the right
     margin-right: -0.8125rem;
-    // Center the button on the title
     margin-top: 0.125rem;
   }
 
   .with-close-button {
     .text-center {
-      // Compensate for the width of the button (1.75rem minus the negative
-      // margin) to center the title in the dialog
       padding-left: 0.9375rem;
     }
   }