From 6bbd1129046dd2a861955b65d7fc75932aaec054 Mon Sep 17 00:00:00 2001
From: Ludwig Reiter <ludwig.reiter@intevation.de>
Date: Mon, 28 Oct 2024 08:36:19 +0100
Subject: [PATCH] Add word-break style to keep width in account-detail view
 (#4270)

---
 .../account-detail/account-detail.component.html          | 8 ++++----
 .../account-detail/account-detail.component.scss          | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html b/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html
index 1f7182dba1..84661eca53 100644
--- a/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html
+++ b/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html
@@ -158,7 +158,7 @@ <h2>{{ 'Committees and meetings' | translate }}</h2>
                     @for (row of tableData | keyvalue: tableDataAscOrderCompare; track row; let lastLine = $last) {
                         <!-- Handle committees without meetings-->
                         @if (!getNumberOfKeys(row.value.meetings)) {
-                            <tr [ngClass]="getCellClass(true, true, lastLine)">
+                            <tr class="word-break" [ngClass]="getCellClass(true, true, lastLine)">
                                 <td>
                                     <a [routerLink]="'/committees/' + row.key + ''">{{ row.value.committee_name }}</a>
                                 </td>
@@ -184,7 +184,7 @@ <h2>{{ 'Committees and meetings' | translate }}</h2>
                             let isFirst = $first;
                             let isLast = $last
                         ) {
-                            <tr [ngClass]="getCellClass(true, true, lastLine)">
+                            <tr class="word-break" [ngClass]="getCellClass(true, true, lastLine)">
                                 @if (isFirst) {
                                     <td [attr.rowspan]="getNumberOfKeys(row.value.meetings)">
                                         <a [routerLink]="'/committees/' + row.key + ''">
@@ -204,12 +204,12 @@ <h2>{{ 'Committees and meetings' | translate }}</h2>
                                         }
                                     </td>
                                 }
-                                <td [ngClass]="getCellClass(false, isLast, lastLine)">
+                                <td class="word-break" [ngClass]="getCellClass(false, isLast, lastLine)">
                                     <a [routerLink]="'/' + meeting_row.key + ''">
                                         {{ meeting_row.value.meeting_name }}
                                     </a>
                                 </td>
-                                <td [ngClass]="getCellClass(false, isLast, lastLine)">
+                                <td class="word-break" [ngClass]="getCellClass(false, isLast, lastLine)">
                                     @for (group of meeting_row.value.group_names; track group; let lastGroup = $last) {
                                         <span>{{ group }}{{ !lastGroup ? ', ' : '' }}</span>
                                     }
diff --git a/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.scss b/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.scss
index 231f090b96..3bed440a0f 100644
--- a/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.scss
+++ b/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.scss
@@ -38,4 +38,8 @@ os-user-detail-view h2 {
     .committee-underline {
         border-bottom: 1px solid rgba(153, 153, 153, 0.5);
     }
+
+    .word-break {
+        word-break: break-word;
+    }
 }