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

@@ -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};

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;