IBX-7725: RTE area is hidden if custom-tag label is too long

ibexa · Feb 6, 2024 · 2a9ca9d · 2a9ca9d
1 parent d84efc4
commit 2a9ca9d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -48,7 +48,7 @@ class IbexaCustomTagEditing extends Plugin {
                     </button>`;
 
                     domElement.innerHTML = `
-                        <div class="ibexa-custom-tag__header-title">${customTagConfig.label}</div>
+                        <div class="ibexa-custom-tag__header-title" title="${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
@@ -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);
     }