chore(alert): add alert media query ui test (VIV-1564) (#1599)

Co-authored-by: root <root@Mono>

libs/components/src/lib/alert/ui.test.ts

@@ -23,7 +23,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 			`${htmlString} <div>${block}</div>`,'');
 
 	page.setViewportSize({ width: 1300, height: 2750 });
-	
+
 	await loadComponents({
 		page,
 		components,
@@ -41,3 +41,32 @@ test('should show the component', async ({ page }: { page: Page }) => {
 		'./snapshots/alert.png'
 	);
 });
+
+async function testResponsiveAlert({ page }: { page: Page }) {
+	const template = `
+			<div style="margin: 5px; height: 250px; transform: translateY(0px);">
+			<vwc-alert text="An important information for you" removable open></vwc-alert>
+			</div>
+`;
+
+	await page.setViewportSize({ width: 420, height: 300 });
+
+	await loadComponents({
+		page,
+		components,
+	});
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.waitForLoadState('networkidle');
+
+
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/alert-mobile.png',
+	);
+}
+test('alert in mobile screens', testResponsiveAlert);