chore: enforce the validationMessageHorizontalOverflow for InlineField (#93858)

chore: enforce the validationMessageHorizontalOverflow prop for inlineField

packages/grafana-ui/src/components/Forms/InlineField.tsx

@@ -45,6 +45,7 @@ export const InlineField = ({
   error,
   transparent,
   interactive,
+  validationMessageHorizontalOverflow,
   ...htmlProps
 }: Props) => {
   const theme = useTheme2();
@@ -72,7 +73,11 @@ export const InlineField = ({
       <div className={styles.childContainer}>
         {cloneElement(children, { invalid, disabled, loading })}
         {invalid && error && (
-          <div className={cx(styles.fieldValidationWrapper)}>
+          <div
+            className={cx(styles.fieldValidationWrapper, {
+              [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow,
+            })}
+          >
             <FieldValidationMessage>{error}</FieldValidationMessage>
           </div>
         )}
@@ -100,5 +105,13 @@ const getStyles = (theme: GrafanaTheme2, grow?: boolean, shrink?: boolean) => {
     fieldValidationWrapper: css({
       marginTop: theme.spacing(0.5),
     }),
+    validationMessageHorizontalOverflow: css({
+      width: 0,
+      overflowX: 'visible',
+
+      '& > *': {
+        whiteSpace: 'nowrap',
+      },
+    }),
   };
 };