[CL-280] truncate overflow text in bit-item (#8992)

libs/components/src/item/item-content.component.html

@@ -1,11 +1,11 @@
-<div class="tw-flex tw-gap-2 tw-items-center">
+<div class="tw-flex tw-gap-2 tw-items-center tw-w-full">
   <ng-content select="[slot=start]"></ng-content>
 
   <div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full [&_p]:tw-mb-0">
-    <div class="tw-text-main tw-text-base">
+    <div class="tw-text-main tw-text-base tw-w-full tw-truncate">
       <ng-content></ng-content>
     </div>
-    <div class="tw-text-muted tw-text-sm">
+    <div class="tw-text-muted tw-text-sm tw-w-full tw-truncate">
       <ng-content select="[slot=secondary]"></ng-content>
     </div>
   </div>

libs/components/src/item/item.component.html

@@ -7,7 +7,7 @@
       : 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent'
   "
 >
-  <bit-item-action class="item-main-content tw-block tw-w-full">
+  <bit-item-action class="item-main-content tw-block tw-flex-1 tw-overflow-hidden">
     <ng-content></ng-content>
   </bit-item-action>
 

libs/components/src/item/item.stories.ts

@@ -113,11 +113,19 @@ export const TextOverflow: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-text-main tw-mb-4">TODO: Fix truncation</div>
       <bit-item>
         <bit-item-content>
-          Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
+          Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
+          <ng-container slot="secondary">Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!</ng-container>
         </bit-item-content>
+        <ng-container slot="end">
+          <bit-item-action>
+            <button type="button" bitIconButton="bwi-clone"></button>
+          </bit-item-action>
+          <bit-item-action>
+            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+          </bit-item-action>
+        </ng-container>
       </bit-item>
     `,
   }),