fix(alert): prevent content from overflowing alert

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

fixes vmware-clarity#137

projects/core/src/alert/alert.element.scss

@@ -50,6 +50,7 @@ cds-internal-close-button {
   display: flex;
   min-height: #{$cds-global-space-6};
   padding: var(--container-padding);
+  min-width: 0;
 }
 
 .alert-icon-wrapper {
@@ -70,6 +71,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};

projects/core/src/alert/alert.element.spec.ts

@@ -53,6 +53,22 @@ describe('Alert element – ', () => {
       await componentIsStable(component);
       expect(component.querySelectorAll('cds-internal-close-button').length).toBe(0);
     });
+
+    it('should not let content overflow alert', async () => {
+      const testElement2 = 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. Ut enim ad minim veniam,</pre
+          >
+        </cds-alert>
+      </cds-alert-group>`);
+      component = testElement2.querySelector<CdsAlert>('cds-alert');
+      const content = component.querySelector('pre');
+
+      expect(content.getBoundingClientRect().width).toBeLessThan(component.getBoundingClientRect().width);
+
+      removeTestElement(testElement);
+    });
   });
 
   describe('custom icons: ', () => {