From c0a21eeb82df824fdc7c266216f31000171d1be3 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 27 Mar 2024 17:04:34 +0100
Subject: [PATCH] Fix overflowing text snippets for support messages

---
 customize.dist/src/less2/include/support.less |  3 ++-
 www/moderation/app-moderation.less            | 18 ++++++++++++++++++
 www/support/ui.js                             | 10 +++++-----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less
index f937314d2..b39a787be 100644
--- a/customize.dist/src/less2/include/support.less
+++ b/customize.dist/src/less2/include/support.less
@@ -33,7 +33,8 @@
         }
         textarea {
             box-sizing: border-box;
-            width: 2*@sidebar_block-width !important;
+            resize: vertical;
+            width: 100%;
             max-width: 100% !important;
             padding: 10px 15px;
             height: 300px;
diff --git a/www/moderation/app-moderation.less b/www/moderation/app-moderation.less
index f97d47bb4..146067e7c 100644
--- a/www/moderation/app-moderation.less
+++ b/www/moderation/app-moderation.less
@@ -109,6 +109,24 @@
             }
         }
     }
+    [data-item="open-ticket"] {
+        .cp-support-form-container {
+            textarea {
+                width: 2*@sidebar_block-width !important;
+            }
+        }
+    }
+
+    .cp-support-recorded {
+        .cp-dropdown-container > button {
+            margin-left: @sidebar_base-margin !important;
+            margin-right: 0 !important;
+        }
+        .cp-fake-dropdown {
+            margin-left: @sidebar_base-margin !important;
+            margin-right: 0 !important;
+        }
+    }
 
     .cp-support-search-container {
         display: flex;
diff --git a/www/support/ui.js b/www/support/ui.js
index afe963b07..5e29bfd64 100644
--- a/www/support/ui.js
+++ b/www/support/ui.js
@@ -243,7 +243,7 @@ define([
             $recorded.append(h('span.cp-support-recorded-insert',
                                     Messages.support_insertRecorded));
             let $span = $(h('span')).appendTo($recorded);
-            let $fakeMore = $(h('button.btn.btn-secondary.fa.fa-ellipsis-h')).appendTo($recorded);
+            let $fakeMore = $(h('button.btn.btn-secondary.fa.fa-ellipsis-h.cp-fake-dropdown')).appendTo($recorded);
             let opts = [];
 
             let all = recorded.all;
@@ -253,7 +253,9 @@ define([
                 return a - b;
             };
             let overflow = false;
-            let maxWidth = $recorded.width();
+            let $label = $recorded.find('.cp-support-recorded-insert');
+            let maxWidth = $recorded.width() - $label.outerWidth(true)
+                                            - $fakeMore.outerWidth(true);
             Object.keys(all).sort(sort).forEach(id => {
                 let action = () => {
                     insertText(all[id].content);
@@ -265,10 +267,8 @@ define([
                 if (!overflow) {
                     let button = h('button.btn.btn-secondary', id);
                     $span.append(button);
-                    let margin = parseFloat(getComputedStyle($fakeMore[0]).marginRight);
-                    let buttonWidth = $fakeMore.width();
                     let current = $span.width();
-                    if ((current + buttonWidth + margin) < maxWidth) {
+                    if (current < maxWidth) {
                         return Util.onClickEnter($(button), action);
                     }
                     $(button).remove();