fix ( category field): #29568 and #29801 Implement ellipsis for long …

…category names / Fix empty state. (#29805) ### Proposed Changes * Implement ellipsis for long category names to prevent horizontal scrolling * Fix empty state in categories. ### Screenshots Before: <img width="843" alt="image" src="https://github.com/user-attachments/assets/92840948-82a4-4123-a482-4ea6219654ec"> <img width="1310" alt="image" src="https://github.com/user-attachments/assets/824c6c59-ed1b-4e15-b95e-35c1c9b729ab"> After: <img width="927" alt="image" src="https://github.com/user-attachments/assets/808d67d1-bc82-4b80-bdee-1b34f8634ddc"> <img width="1087" alt="image" src="https://github.com/user-attachments/assets/0d3fa648-5e46-445a-a5ba-1defd08453af">
dotCMS · Aug 30, 2024 · d7bf730 · d7bf730
1 parent 410fca4
commit d7bf730
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html b/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html
@@ -27,10 +27,10 @@
                             class="flex w-full h-full align-items-stretch align-content-center category-list__item-wrapper"
                             (click)="rowClicked.emit({ index, item })"
                             [class.cursor-pointer]="item.hasChildren">
-                            <div class="flex w-full align-content-center align-items-center">
+                            <div class="flex w-full gap-1 align-content-center align-items-center">
                                 <label
                                     data-testId="category-item-label"
-                                    class="flex flex-grow-1 category-list__item-label"
+                                    class="category-list__item-label"
                                     [class.cursor-pointer]="item.hasChildren"
                                     [for]="item.key">
                                     {{ item.value }}
@@ -59,6 +59,6 @@
             </div>
         }
     </div>
-} @else if (!$isInitialState) {
+} @else if (!$isInitialState()) {
     <dot-empty-container [configuration]="$emptyState()" [hideContactUsLink]="true" />
 }
diff --git a/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.scss b/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.scss
@@ -58,6 +58,7 @@
 .category-list__item-wrapper {
     padding-left: $spacing-3;
     padding-right: $spacing-1;
+    overflow: hidden;
 }
 
 .category-list__item-checkbox {