Fixes #3999 - Long role names get broken due to bad overflow

app/assets/javascripts/app/views/knowledge_base/permissions_dialog.jst.eco

@@ -1,7 +1,6 @@
-<div style="padding-left: 18px; padding-top: 10px;">
 <table class="settings-list settings-list--roles-permissions">
   <thead>
-      <th width=150><%- @T('Role') %>
+    <th><%- @T('Role') %>
     <% for key, text of @accessLevels: %>
       <th><%- @T(text) %>
     <% end %>
@@ -10,6 +9,7 @@
   <tr>
     <td>
       <%= role.name %>
+
     <% for key, text of @accessLevels: %>
       <td class="settings-list-control-cell settings-list-radio-cell u-clickable">
         <label class="inline-label radio-replacement">
@@ -29,5 +29,3 @@
     <% end %>
   </tr>
 <% end %>
-  </table>
-</div>

app/assets/stylesheets/zammad.scss

@@ -10802,7 +10802,7 @@ output {
   }
 
   td {
-    word-break: break-all;
+    word-break: break-word;
   }
 
   td.empty-cell {
@@ -10958,6 +10958,16 @@ output {
   }
 }
 
+.settings-list--roles-permissions {
+  margin-left: 18px;
+  margin-right: 18px;
+  margin-top: 10px;
+
+  th:first-child {
+    min-width: 150px;
+  }
+}
+
 .select-boxes {
   display: flex;
   align-items: flex-start;