From 2243f2b5f593eb34eca22a9a0fdf560e8e4e1ba2 Mon Sep 17 00:00:00 2001
From: Ashley Ryan <asryan@vmware.com>
Date: Thu, 4 Aug 2022 14:03:53 -0400
Subject: [PATCH] fix(alert): prevent content from overflowing alert

- flexbox has some quirks with overflow
- setting min-width: 0 prevents the content from overflowing

fixes #137
---
 projects/core/src/alert/alert.element.scss    |  5 ++++
 projects/core/src/alert/alert.element.spec.ts | 27 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/projects/core/src/alert/alert.element.scss b/projects/core/src/alert/alert.element.scss
index c6637fc0e..d20c40f2c 100644
--- a/projects/core/src/alert/alert.element.scss
+++ b/projects/core/src/alert/alert.element.scss
@@ -52,6 +52,7 @@ cds-internal-close-button {
   display: flex;
   min-height: #{$cds-global-space-6};
   padding: var(--container-padding);
+  min-width: 0;
 }
 
 .alert-icon-wrapper {
@@ -72,6 +73,10 @@ cds-internal-close-button {
   line-height: $lightweight-alert-line-height;
 }
 
+.alert-content {
+  min-width: 0;
+}
+
 ::slotted(cds-alert-actions) {
   --action-text-color: var(--color);
   --action-size: #{$lightweight-alert-line-height};
diff --git a/projects/core/src/alert/alert.element.spec.ts b/projects/core/src/alert/alert.element.spec.ts
index 9f14c3084..79a2b6247 100644
--- a/projects/core/src/alert/alert.element.spec.ts
+++ b/projects/core/src/alert/alert.element.spec.ts
@@ -56,6 +56,33 @@ describe('Alert element – ', () => {
     });
   });
 
+  describe('layout:', () => {
+    beforeEach(async () => {
+      testElement = await createTestElement(html`
+        <cds-alert-group status="info" style="width: 200px">
+          <cds-alert>
+            <pre style="overflow-x: auto">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </pre
+            >
+          </cds-alert>
+        </cds-alert-group>
+      `);
+      component = testElement.querySelector<CdsAlert>('cds-alert');
+    });
+
+    afterEach(() => {
+      removeTestElement(testElement);
+    });
+
+    it('should not let content overflow alert', async () => {
+      await componentIsStable(component);
+      const content = component.querySelector('pre');
+      expect(content.getBoundingClientRect().width).toBeLessThan(component.getBoundingClientRect().width);
+    });
+  });
+
   describe('custom icons: ', () => {
     let customComponent: CdsAlert;