fix(form): fix rerender issue with helpertext on safari (#6394)

* fix(form): fix rerender issue with helpertext on safari

* docs(form): add comment to style change

Co-authored-by: Alessandra Davila <aledavila@ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/components/src/components/form/_form.scss

@@ -17,11 +17,13 @@
 @mixin form {
   .#{$prefix}--fieldset {
     @include reset;
+
     margin-bottom: $carbon--spacing-07;
   }
 
   .#{$prefix}--form-item {
     @include type-style('body-short-01');
+
     display: flex;
     flex-direction: column;
     // We specify `auto` as the default value so that the form item does
@@ -52,6 +54,7 @@
   // Skeleton State
   .#{$prefix}--label.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(75px);
     height: rem(14px);
   }
@@ -111,6 +114,7 @@
   .#{$prefix}--form-requirement {
     @include reset;
     @include type-style('caption-01');
+
     margin: $carbon--spacing-02 0 0;
     max-height: 0;
     overflow: hidden;
@@ -123,10 +127,13 @@
 
   .#{$prefix}--form__helper-text {
     @include type-style('helper-text-01');
+
     color: $text-02;
     z-index: 0;
     opacity: 1;
     margin-top: $carbon--spacing-02;
+    // Added to prevent error text from displaying under helper text in Safari (#6392)
+    width: 100%;
   }
 
   .#{$prefix}--label--disabled,