fix(S2): ContextualHelp in Field wrapping to new line (#7491)

* fix ContextualHelp wrapping to new line

* allow wrapping of label, but don't just wrap ContextualHelp

* remove marginStart

Author: reidbarber

packages/@react-spectrum/s2/src/Field.tsx

@@ -127,21 +127,23 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
         )}
       </Label>
       {contextualHelp && (
-        <CenterBaseline
-          styles={style({
-            display: 'inline-flex',
-            height: 0,
-            marginStart: 4
-          })}>
-          <ContextualHelpContext.Provider
-            value={{
-              id: contextualHelpId,
-              'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
-              size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
-            }}>
-            {contextualHelp}
-          </ContextualHelpContext.Provider>
-        </CenterBaseline>
+        <span className={style({whiteSpace: 'nowrap'})}>
+          &nbsp;
+          <CenterBaseline
+            styles={style({
+              display: 'inline-flex',
+              height: 0
+            })}>
+            <ContextualHelpContext.Provider
+              value={{
+                id: contextualHelpId,
+                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
+                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
+              }}>
+              {contextualHelp}
+            </ContextualHelpContext.Provider>
+          </CenterBaseline>
+        </span>
       )}
     </div>
   );