Fix popover width and improve dropdown list truncation (#542)

* Fix popover width

* Improve truncation logic

* Update checkable-item.hbs

* Update test selectors and remove old CSS

web/app/components/x/dropdown-list/checkable-item.hbs

@@ -1,7 +1,7 @@
 <div
   data-test-checkable-item
   class="checkable-item checkmark-position--{{or @checkmarkPosition 'leading'}}
-    flex w-full items-center gap-2.5"
+    w-full items-center gap-2.5"
   ...attributes
 >
 
@@ -12,22 +12,27 @@
     class="check {{if @isSelected 'visible' 'invisible'}}"
   />
 
-  <div data-test-checkable-item-content class="checkable-item-content w-full">
+  <div
+    data-test-checkable-item-content
+    class="checkable-item-content w-full overflow-hidden"
+  >
     {{#if (has-block "default")}}
       {{yield}}
     {{else}}
-      <div class="x-dropdown-list-item-value">
+      <div data-test-x-dropdown-list-item-value class="truncate">
         {{@value}}
       </div>
     {{/if}}
   </div>
 
   {{#if @count}}
-    <Hds::BadgeCount
-      data-test-x-dropdown-list-checkable-item-count
-      @text="{{@count}}"
-      @size="small"
-      class="x-dropdown-list-item-count checkable-item-count"
-    />
+    <div class="grid">
+      <Hds::BadgeCount
+        data-test-x-dropdown-list-checkable-item-count
+        @text="{{@count}}"
+        @size="small"
+        class="checkable-item-count ml-auto"
+      />
+    </div>
   {{/if}}
 </div>

web/app/components/x/dropdown-list/index.hbs

@@ -11,7 +11,9 @@
   @offset={{@offset}}
   @disableClose={{@disableClose}}
   @matchAnchorWidth={{@matchAnchorWidth}}
-  class="{{unless (eq @placement null) 'hermes-popover'}} x-dropdown-list"
+  class="x-dropdown-list
+    {{unless (eq @placement null) 'hermes-popover'}}
+    {{if this.inputIsShown 'has-input'}}"
   data-test-x-dropdown-list-content
   {{will-destroy this.onDestroy}}
   ...attributes
@@ -96,7 +98,7 @@
       {{will-destroy this.resetFilteredItems}}
       {{dismissible dismiss=f.hideContent related=f.anchor}}
       id="x-dropdown-list-container-{{f.contentID}}"
-      class="x-dropdown-list-container {{if this.inputIsShown 'has-input'}}"
+      class="x-dropdown-list-container"
       role={{if this.inputIsShown "combobox"}}
     >
       {{#if @isLoading}}

web/app/styles/components/x/dropdown/list-item.scss

@@ -32,16 +32,13 @@
   }
 }
 
-.x-dropdown-list-item-value {
-  @apply w-full truncate whitespace-nowrap;
-}
-
-.x-dropdown-list-item-count {
-  @apply ml-8 shrink-0;
-}
-
 .checkable-item {
+  @apply grid;
+  grid-template-columns: 16px auto 60px;
+
   &.checkmark-position--trailing {
+    grid-template-columns: auto 60px 16px;
+
     .checkable-item-content {
       @apply order-1;
     }

web/tests/integration/components/header/toolbar-test.ts

@@ -76,11 +76,11 @@ module("Integration | Component | header/toolbar", function (hooks) {
     await click("[data-test-facet-dropdown-trigger='Status']");
 
     assert.deepEqual(
-      findAll(".x-dropdown-list-item-value")?.map((el) =>
-        el.textContent?.trim()
+      findAll("[data-test-x-dropdown-list-item-value]")?.map(
+        (el) => el.textContent?.trim(),
       ),
       ["Approved", "In-Review", "In Review", "Obsolete", "WIP"],
-      "Unsupported statuses are filtered out"
+      "Unsupported statuses are filtered out",
     );
   });
 

web/tests/integration/components/x/dropdown-list/checkable-item-test.ts

@@ -31,7 +31,7 @@ module("Integration | Component | x/dropdown-list", function (hooks) {
     `);
 
     assert.dom(CHECK).hasClass("invisible");
-    assert.dom(".x-dropdown-list-item-value").hasText("foo");
+    assert.dom("[data-test-x-dropdown-list-item-value]").hasText("foo");
     assert.dom(COUNT).doesNotExist();
 
     this.set("isSelected", true);