From 55c9c3d39f75d268bea46a7b9fa208264ddfe965 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 26 Jun 2026 21:02:46 +0200
Subject: [PATCH] Task/improve error message styling in import activities
 dialog (#7143)

* Improve styling

* Update changelog
---
 CHANGELOG.md                                          |  1 +
 .../import-activities-dialog.html                     |  8 +++++---
 .../import-activities-dialog.scss                     | 11 +++++++++--
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 836ee7683..84aa776b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the error message styling in the import activities dialog
 - Improved the grantee display in the access table to share the portfolio
 - Improved the country mapping for data providers
 - Upgraded `bull-board` from version `7.2.1` to `8.0.1`
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
index 506076afd..4149ce5b6 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@@ -164,12 +164,14 @@
               @for (message of errorMessages; track message; let i = $index) {
                 <mat-expansion-panel [disabled]="!details[i]">
                   <mat-expansion-panel-header class="pl-1">
-                    <mat-panel-title>
-                      <div class="d-flex">
+                    <mat-panel-title class="w-100">
+                      <div class="d-flex w-100">
                         <div class="align-items-center d-flex mr-2">
                           <ion-icon name="warning-outline" />
                         </div>
-                        <div>{{ message }}</div>
+                        <div class="text-truncate" title="{{ message }}">
+                          {{ message }}
+                        </div>
                       </div>
                     </mat-panel-title>
                   </mat-expansion-panel-header>
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
index 0f3b181cc..79f8f868c 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 :host {
   display: block;
 
@@ -41,8 +43,13 @@
     }
 
     .mat-expansion-panel {
-      background: none;
-      box-shadow: none;
+      @include mat.expansion-overrides(
+        (
+          container-background-color: transparent,
+          container-elevation-shadow: none,
+          container-shape: 0
+        )
+      );
 
       .mat-expansion-panel-header {
         color: inherit;