From fa7f5f0489e9b2a0fc482465af50adff39d69640 Mon Sep 17 00:00:00 2001
From: Vidar <vl@ez.no>
Date: Mon, 4 Mar 2024 13:24:35 +0100
Subject: [PATCH] IBX-7725: RTE area is hidden if custom-tag label is too long
 (#146)

---
 .../custom-tags/block-custom-tag/custom-tag-editing.js     | 4 +++-
 src/bundle/Resources/public/scss/_custom-tag.scss          | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js
index 82376d9b..98589810 100644
--- a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js
+++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js
@@ -48,7 +48,9 @@ class IbexaCustomTagEditing extends Plugin {
                     </button>`;
 
                     domElement.innerHTML = `
-                        <div class="ibexa-custom-tag__header-title">${customTagConfig.label}</div>
+                        <div class="ibexa-custom-tag__header-title" data-cke-tooltip-text="${customTagConfig.label}">
+                            ${customTagConfig.label}
+                        </div>
                         <div class="ibexa-custom-tag__header-actions">
                             ${Object.keys(customTagConfig.attributes).length ? attributesButton : ''}
                             <button type="button" class="ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--remove-custom-tag">
diff --git a/src/bundle/Resources/public/scss/_custom-tag.scss b/src/bundle/Resources/public/scss/_custom-tag.scss
index 6972ec8b..49ab6d7f 100644
--- a/src/bundle/Resources/public/scss/_custom-tag.scss
+++ b/src/bundle/Resources/public/scss/_custom-tag.scss
@@ -19,6 +19,13 @@
         border-top-right-radius: $ibexa-border-radius;
     }
 
+    &__header-title {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 80%;
+    }
+
     &[data-ezelement='eztemplateinline'] {
         padding: calculateRem(4px) calculateRem(8px);
     }