[SM-402] Truncate dialog headers (#4854)

libs/components/src/dialog/dialog/dialog.component.html

@@ -6,7 +6,7 @@
   <div
     class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
   >
-    <h1 bitDialogTitleContainer class="tw-mb-0 tw-grow tw-text-lg tw-uppercase">
+    <h1 bitDialogTitleContainer class="tw-mb-0 tw-grow tw-truncate tw-text-lg tw-uppercase">
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h1>
     <button

libs/components/src/dialog/dialog/dialog.stories.ts

@@ -82,6 +82,12 @@ Small.args = {
   title: "Small",
 };
 
+export const LongTitle = Template.bind({});
+LongTitle.args = {
+  dialogSize: "small",
+  title: "Long_Title_That_Should_Be_Truncated",
+};
+
 export const Large = Template.bind({});
 Large.args = {
   dialogSize: "large",