From 513fadc8dc3de28a11280395b979f9e508762057 Mon Sep 17 00:00:00 2001
From: Mantas Masalskis <mm@zammad.com>
Date: Wed, 9 Mar 2022 22:32:12 +0100
Subject: [PATCH] Fixes #3999 - Long role names get broken due to bad overflow

---
 .../knowledge_base/permissions_dialog.jst.eco | 64 +++++++++----------
 app/assets/stylesheets/zammad.scss            | 12 +++-
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/app/views/knowledge_base/permissions_dialog.jst.eco b/app/assets/javascripts/app/views/knowledge_base/permissions_dialog.jst.eco
index 7dd6ecf0e..9ade2d4d0 100644
--- a/app/assets/javascripts/app/views/knowledge_base/permissions_dialog.jst.eco
+++ b/app/assets/javascripts/app/views/knowledge_base/permissions_dialog.jst.eco
@@ -1,33 +1,31 @@
-<div style="padding-left: 18px; padding-top: 10px;">
-  <table class="settings-list settings-list--roles-permissions">
-    <thead>
-      <th width=150><%- @T('Role') %>
-      <% for key, text of @accessLevels: %>
-        <th><%- @T(text) %>
-      <% end %>
-    <tbody>
-  <% for role in @roles: %>
-    <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">
-            <input
-              type="radio"
-              value="<%= key %>"
-              name="<%= role.id %>"
-              <% if @params[role.id] == key: %>checked<% end %>
-              <% if role.limit?: %>
-                <% if key == 'editor' && role.limit != 'editor': %>disabled<% end %>
-                <% if key == 'reader' && role.limit == 'none': %>disabled<% end %>
-              <% end %>
-              />
-            <%- @Icon('radio', 'icon-unchecked') %>
-            <%- @Icon('radio-checked', 'icon-checked') %>
-          </label>
-      <% end %>
-    </tr>
-  <% end %>
-  </table>
-</div>
+<table class="settings-list settings-list--roles-permissions">
+  <thead>
+    <th><%- @T('Role') %>
+    <% for key, text of @accessLevels: %>
+      <th><%- @T(text) %>
+    <% end %>
+  <tbody>
+<% for role in @roles: %>
+  <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">
+          <input
+            type="radio"
+            value="<%= key %>"
+            name="<%= role.id %>"
+            <% if @params[role.id] == key: %>checked<% end %>
+            <% if role.limit?: %>
+              <% if key == 'editor' && role.limit != 'editor': %>disabled<% end %>
+              <% if key == 'reader' && role.limit == 'none': %>disabled<% end %>
+            <% end %>
+            />
+          <%- @Icon('radio', 'icon-unchecked') %>
+          <%- @Icon('radio-checked', 'icon-checked') %>
+        </label>
+    <% end %>
+  </tr>
+<% end %>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 95f6a2d39..47fa39750 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/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;