[CL-342] make overflow text wrap in simple dialog (#10418)

* add overflow story and fix to simple dialog

* Update libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts

Co-authored-by: Victoria League <vleague@bitwarden.com>

---------

Co-authored-by: Victoria League <vleague@bitwarden.com>

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

@@ -9,11 +9,16 @@
     <ng-template #elseBlock>
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
     </ng-template>
-    <h1 bitDialogTitleContainer class="tw-mb-0 tw-text-base tw-font-semibold">
+    <h1
+      bitDialogTitleContainer
+      class="tw-mb-0 tw-text-base tw-font-semibold tw-w-full tw-break-words tw-hyphens-auto"
+    >
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h1>
   </div>
-  <div class="tw-overflow-y-auto tw-px-4 tw-pb-4 tw-pt-2 tw-text-center tw-text-base">
+  <div
+    class="tw-overflow-y-auto tw-px-4 tw-pb-4 tw-pt-2 tw-text-center tw-text-base tw-break-words tw-hyphens-auto"
+  >
     <ng-content select="[bitDialogContent]"></ng-content>
   </div>
   <div

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

@@ -82,3 +82,19 @@ export const ScrollingContent: Story = {
     useDefaultIcon: true,
   },
 };
+
+export const TextOverflow: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-simple-dialog>
+        <span bitDialogTitle>Alert Dialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialog</span>
+        <span bitDialogContent>Message Contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</span>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary">Yes</button>
+          <button bitButton buttonType="secondary">No</button>
+        </ng-container>
+      </bit-simple-dialog>
+    `,
+  }),
+};