[dev-v5][ValidationMessage] Fix displaying multiple messages on top of each other

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md

@@ -19,7 +19,7 @@ By default the Fluent UI components render validation feedback using the library
 builder.Services.AddFluentUIComponents(config =>
 {
     // Default is false. Set to true to enable the browser's native constraint validation UI.
-    config.UseNativeConstraintValidationUi = true;
+    config.UseNativeConstraintValidationUI = true;
 });
 ```
 

src/Core/Components/Forms/FluentValidationMessage.razor

@@ -2,15 +2,17 @@
 @inherits FluentComponentBase
 @typeparam TValue
 
-@foreach (var message in ValidationMessages)
-{
-    <FluentText slot="@FluentSlot.FieldMessage"
-                Class="@ClassValue"
-                Style="@StyleValue"
-                Size="@TextSize.Size200"
-                Color="@Color.Error"
-                @attributes="AdditionalAttributes">
-        @CreateIcon(Icon)
-        @message
-    </FluentText>
-}
+<FluentText slot="@FluentSlot.FieldMessage"
+            Class="@ClassValue"
+            Style="@StyleValue"
+            Size="@TextSize.Size200"
+            Color="@Color.Error"
+            @attributes="AdditionalAttributes">
+    @foreach (var message in ValidationMessages)
+    {   <div message >
+            @CreateIcon(Icon)
+            @message
+        </div>
+
+    }
+</FluentText>

src/Core/Components/Forms/FluentValidationMessage.razor.css

@@ -1,4 +1,5 @@
-.fluent-validation-message {
+.fluent-validation-message > div[message] {
   display: flex;
   align-items: center;
+  border: 1px dotted green;
 }