From d7bf7300a1e5103fd924101e3223e927672adcbf Mon Sep 17 00:00:00 2001
From: Humberto Morera <31667212+hmoreras@users.noreply.github.com>
Date: Fri, 30 Aug 2024 16:46:28 -0500
Subject: [PATCH] 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">
---
 .../dot-category-field-category-list.component.html         | 6 +++---
 .../dot-category-field-category-list.component.scss         | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html
index 711c4245e58d..00bfcd9df875 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.scss
index a206cc3a8faf..24b336c77f75 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/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 {