Add word-break style to keep width in account-detail view (#4270)

OpenSlides · Oct 28, 2024 · 6bbd112 · 6bbd112
1 parent 8c1431d
commit 6bbd112
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/...ges/accounts/pages/account-detail/components/account-detail/account-detail.component.html b/...ges/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/...ges/accounts/pages/account-detail/components/account-detail/account-detail.component.scss b/...ges/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;
+    }
 }