feat(core): notification content by default should be break by word (#…

…6611)

.cspell.json

@@ -36,7 +36,8 @@
         "retrowave",
         "replicants",
         "tuiiconbutton",
-        "hitbox"
+        "hitbox",
+        "viewports"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [

projects/core/components/notification/notification.style.less

@@ -79,7 +79,6 @@
 
 .t-content {
     flex: 1;
-    word-wrap: break-word;
-    overflow-wrap: anywhere;
+    word-break: break-word;
     color: var(--tui-text-01);
 }

projects/demo-playwright/tests/kit/notification/notification.spec.ts

@@ -0,0 +1,37 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, Locator, test} from '@playwright/test';
+
+test.describe('Notification', () => {
+    const viewports = generateDimensions(180, 320, 10);
+    let example: Locator;
+
+    test.describe('default', () => {
+        test.beforeEach(async ({page}) => {
+            await tuiGoto(page, '/components/notification/API');
+
+            example = new TuiDocumentationPagePO(page).apiPageExample;
+        });
+
+        viewports.forEach(({width, height}) => {
+            test(`width: ${width}`, async ({page}) => {
+                await page.setViewportSize({width, height});
+                await expect(example).toHaveScreenshot(`01-notification-${width}.png`);
+            });
+        });
+    });
+});
+
+interface Dimensions {
+    width: number;
+    height: number;
+}
+
+function generateDimensions(start: number, end: number, step: number): Dimensions[] {
+    const viewports: Dimensions[] = [];
+
+    for (let width = start; width <= end; width += step) {
+        viewports.push({width, height: 500});
+    }
+
+    return viewports;
+}