Task/improve error message styling in import activities dialog (#7143)

* Improve styling

* Update changelog

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`

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>

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;