feat: improve inline error icon position

Author: ganiirsyadi

src/@next/InlineError/InlineErrorStyle.ts

@@ -2,11 +2,23 @@ import styled from 'styled-components';
 import { space4 } from '../utilities/spacing';
 import { Typography } from '../Typography';
 import { Red } from '../utilities/colors';
+import { Breakpoints } from '..';
 
 export const StyledWrapper = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: ${space4};
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  @media (max-width: ${Breakpoints.large}) {
+    svg {
+      height: 18px;
+      width: 18px;
+    }
+  }
 `;
 
 export const StyledText = styled(Typography)`

test/e2e/inlineError/inlineError.spec.ts

@@ -6,3 +6,33 @@ test('Inline Error - default', async ({ page }) => {
   await inlineError.goto();
   await expect(inlineError.container).toHaveScreenshot('inlineError.png');
 });
+
+test('Inline Error - default (small device)', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+
+  const inlineError = new InlineErrorPage(page);
+  await inlineError.goto();
+  await expect(inlineError.container).toHaveScreenshot('inlineError-small.png');
+});
+
+test('Inline Error - multi line', async ({ page }) => {
+  const inlineError = new InlineErrorPage(page);
+  await inlineError.goto(
+    'args=text:This%20is%20a%20very%20long%20error%20message%20that%20will%20wrap%20to%20multiple%20lines%20that%20will%20wrap%20to%20multiple%20lines%20will%20wrap%20to%20multiple%20lines%20that%20will%20wrap%20to%20multiple%20lines%20is%20a%20very%20long%20error%20message%20that%20will%20wrap%20to%20multiple%20lines%20that%20will%20wrap%20to%20multiple%20lines%20will%20wrap%20to%20multiple%20lines%20that%20will%20wrap%20to%20multiple%20lines'
+  );
+  await expect(inlineError.container).toHaveScreenshot(
+    'inlineError-multi-line.png'
+  );
+});
+
+test('Inline Error - multi line (small device)', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+
+  const inlineError = new InlineErrorPage(page);
+  await inlineError.goto(
+    'args=text:This%20is%20a%20very%20long%20error%20message%20that%20will%20wrap%20to%20multiple%20lines%20that%20will%20wrap%20to%20multiple%20lines%20will%20wrap%20to%20multiple%20lines%20that%20will%20wrap%20to%20multiple%20lines'
+  );
+  await expect(inlineError.container).toHaveScreenshot(
+    'inlineError-small-multi-line.png'
+  );
+});