added ellipsis on preview

ibexa · Aug 2, 2024 · 785a57e · 785a57e
1 parent 83d3c60
commit 785a57e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/bundle/Resources/public/scss/fieldType/preview/_ezkeyword.scss b/src/bundle/Resources/public/scss/fieldType/preview/_ezkeyword.scss
@@ -3,10 +3,19 @@
     padding-left: 0;
     margin-bottom: 0;
 
-    .ibexa-keyword__item {
-        @include tag();
+    .ibexa-keyword {
+        &__item {
+            @include tag();
 
-        margin: 0 calculateRem(5px) 0 0;
-        padding: calculateRem(6px) calculateRem(8px);
+            max-width: 100%;
+            margin: 0 calculateRem(5px) 0 0;
+            padding: calculateRem(6px) calculateRem(8px);
+        }
+
+        &__item-content {
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
     }
 }
diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig
@@ -154,7 +154,11 @@
         {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ezkeyword')|trim}) %}
         <ul {{ block( 'field_attributes' ) }}>
         {% for keyword in field.value.values %}
-            <li class="ibexa-keyword__item">{{ keyword }}</li>
+            <li class="ibexa-keyword__item">
+                <span class="ibexa-keyword__item-content">
+                    {{ keyword }}
+                </span>
+            </li>
         {% endfor %}
         </ul>
     {% endif %}