fix(styles): refactor icons declarations #3482 (#3517)

Changes were already merged into v8. --------- Co-authored-by: Philipp Gfeller <[email protected]>
swisspost · Sep 11, 2024 · 004cc64 · 004cc64
1 parent 20a456e
commit 004cc64
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/great-humans-talk.md b/.changeset/great-humans-talk.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Resolved issue where validation message icons repeated on each line of multi-line messages. Implemented flexbox layout to ensure a single, vertically centered icon regardless of message length.
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
@@ -31,9 +31,11 @@
 
   &::before {
     content: '';
+    flex-shrink: 0;
+    mask-repeat: no-repeat;
+    align-self: flex-start;
     height: form-validation.$form-feedback-font-size * type.$line-height-copy;
     width: form-validation.$form-feedback-font-size * type.$line-height-copy;
-    display: inline-block;
     margin-right: spacing.$size-mini;
   }
 }