From 181c697ff7ac1712161ee4e8ba2edc2865b87f44 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Wed, 7 Aug 2024 10:30:13 -0400
Subject: [PATCH] [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>
---
 .../simple-dialog/simple-dialog.component.html   |  9 +++++++--
 .../simple-dialog/simple-dialog.stories.ts       | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 261c1107954..efbc4343cd7 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/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
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
index 27a82c46109..a433de21bec 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
+++ b/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>
+    `,
+  }),
+};